Remove 3 pixels in iOS/WebKit textarea

Question

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.

Answer 1

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;
    }
}

Answer 2

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);

Answer 3

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; }
}

Answer 4

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!

Answer 5

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;
}

Answer 6

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