Remove 3 pixels in iOS/WebKit textarea

Okay... Sorry... Here we go... The officially unofficial answer is...

You can't get rid of it.

Apparently this is a "bug" with mobile safari on inputs. See:

• <input type="submit"> padding bug on Safari mobile?
• iPhone <button> padding unchangeable?

You can, however, knowing the indent do this

textarea {  text-indent:-3px;}

It's not a pretty solution, but it does what you need.

EditForgot to mention, tested with iOS Simulator. You might try on your phone itself.

Another point: This also assumes that you're serving up css solely for mobile safari, specifically for the iPhone. An older way of doing this is:

/* Main CSS here *//* iPhone CSS */@media screen and (max-device-width: 480px){  /* iPhone only CSS here */  textarea {    text-indent: -3px;  }}

Edit AgainI'm having way too much fun with this... You can also use separate stylesheets with these declarations:

<link rel="stylesheet" media="all and (max-device-width: 480px)" href="iphone.css"> <link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" href="ipad-portrait.css"> <link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" href="ipad-landscape.css"> <link rel="stylesheet" media="all and (min-device-width: 1025px)" href="ipad-landscape.css"> 

Edit Because apparently somebody bought an Android ;)

<script type="text/javascript">if (navigator.userAgent.indexOf('iPhone') != -1) {  document.write('<link rel="stylesheet" href="iphone.css" type="text/css" />');} else if (navigator.userAgent.indexOf('Android') != -1) {  document.write('<link rel="stylesheet" href="android.css" type="text/css" />');} else {  document.write('<link rel="stylesheet" href="desktop.css" type="text/css" />');}</script>

Personally, I don't really have a problem with text-entries having some internal indentation. It clears it from the area's edge and makes it more readable. I do, however, believe that a browser should support the spec. So here's an update for differentiating between android and iPhone. Have fun!

Here's a quick JavaScript solution (based on stslavik's approach) that saves some code lines and tests for iPad and iPod as well.

If you use jQuery:

if(/iPhone|iPad|iPod/i.test(navigator.userAgent)){  $('textarea').css('text-indent', '-3px');}

If you want to use standard JS:

if(/iPhone|iPad|iPod/i.test(navigator.userAgent)){  textareas = document.getElementsByTagName('textarea');  for(i = 0; i < textareas.length; i++){    textareas[i].style['text-indent'] = '-3px';  }}

One work around is to use a div that you set as editable.

HTML

<div class="editable" contenteditable="true">    Editable text...</div>

Javascript:

<div onClick="this.contentEditable='true';">    This is a test</div>

jQuery

 $(this).prop('contentEditable',true);