Remove 3 pixels in iOS/WebKit textarea_问答_开发者

I'm trying to create a textarea that looks exactly like a div.

However, on iOS there's 3 pixels coming from somewhere that I can't remove.

Here's my code:

<!doctype html>
<title>Textarea test</title>
<style>
textarea, div
{
  background: yellow;
  font: 13px arial;
  border: 0;
  padding: 0;
  border-radius: 0;
  margin: 0;

  -webkit-appearance: none;
}
</style>
<div>test</div>
<hr>
<textarea>test</textarea>

This is rendered like so (I've zoomed in):

Remove 3 pixels in iOS/WebKit textarea

As the screenshot shows, there's 3 pixels before the text that I want to get rid of. As far as I can see it's not the margin/padding or border.

This happens on my iPhone and iPad, both running iOS 4.3. And to be clear; those 3 extra pixels don't show up on Safari/Firefox/Chrome on my desktop. Or my brother's Windows Phone开发者_开发知识库, for that matter.

EDIT 2011-08-10:

I've just tested this on a <input type=text> and the same "padding" thing appears, except that it's 1 pixel instead of 3.

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.

Edit Forgot 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 Again I'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);

text-intend doesn't work when having multiple lines, (as Jonathan mentioned in a comment at the accepted answer).

So, this worked for me on iPhone 6:

textarea {
    margin-left: -3px;
    &::placeholder {
        padding-left: 3px;
    }
}

Based off the previous answers it seems like the best way to tackle this is by adding a margin-left: -3px to the textarea element. We can do this with some CSS tackling particularly iOS Safari which won't mess things up on Android

textarea @supports (-webkit-overflow-scrolling: touch) {
    /* CSS specific to iOS devices */
    margin-left: -3px;
}
textarea::placeholder @supports (-webkit-overflow-scrolling: touch) {
    /* CSS specific to iOS devices */
    text-indent: -3px;
}

So, a pure css solution that builds upon those already mentioned. However the text-indent only does so much for me, as the placeholder isn't effected. If you add in one extra line, it helps to reset the extra indent for iOS devices. Will probably have to do some other wizardy to allow for other touch devices of widths above 480px though.

@media only screen and (max-device-width: 480px) {
   textarea {text-indent: -3px;}
   textarea::-webkit-input-placeholder { text-indent: 0px; }
}

can't test it right now, but try

float: left;

and/or

border-width: 0;

and/or

padding: -3px;

EDIT - another try:

-webkit-padding-start: 0px;
-webkit-margin-start: 0px;
text-indent: 0px;
border-spacing: 0px;
-webkit-border-horizontal-spacing: 0px;
outline-offset: 0px;

For a reference including compatibility information see https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariCSSRef/Introduction.html#//apple_ref/doc/uid/TP30001267-SW1