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.

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

3 extra pixels

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.

Have you tried padding-left=0, padding-..=0, etc? Is this an iOS/WebKit problem or does this also happens with other platforms? — lm2s, Aug 02 '11 at 16:27
@lm2s Yeah, the padding is 0 (see the code). I don't have any other mobile devices to test on, but on my desktop there's no extra spacing on Safari, Firefox or Chrome. — Tom Lokhorst, Aug 02 '11 at 21:19

score 12 · Accepted Answer · edited May 23 '17 at 12:26

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:

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!

I'm afraid I'll have to go with the `text-indent: -3px;` option. And serve that to iOS only. — Tom Lokhorst, Aug 12 '11 at 16:13
It's not a terrible option: Akin to serving up specific styles for IE7/8/9. It's just not pretty. Until mobile-safari starts rendering more accurately, anyhow. — stslavik, Aug 12 '11 at 16:35
@defrex: People using Android have other problems (You know, that they wasted money on an Android). You want to fix it, you can always use selective JS. I'll post an example above. — stslavik, Aug 12 '11 at 17:39
`text-indent` only applies to the first line of text. This works fine in an ``, but in a `` with multiple lines of text only the first line is moved to the left. In that situation you should use something like `margin-left: -3px`. — Jonathan, Sep 01 '13 at 15:43

saschoar · Answer 2 · 2014-03-18T15:47:25.887

4

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

edited Mar 18 '14 at 15:47

answered Mar 18 '14 at 15:34

saschoar

7,772
5
40
44

1

This is the solution I use and it works great. I'm using `margin-left: -3px` instead of `text-indent`, but same idea, thank you. – skcin7 Aug 02 '17 at 23:33

score 1 · Answer 3 · answered Sep 16 '15 at 02:12

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

score 0 · Answer 4 · answered May 05 '17 at 10:59

0

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

answered May 05 '17 at 10:59

Betty St

2,683
19
32

score 0 · Answer 5 · answered Oct 24 '18 at 18:16

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

score -1 · Answer 6 · answered Jul 24 '15 at 02:43

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

score -2 · Answer 7 · edited Mar 24 '19 at 14:09

-2

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

edited Mar 24 '19 at 14:09

Cœur

32,421
21
173
232

answered Aug 04 '11 at 20:54

Yahia

67,016
7
102
131

Sorry for the late response. But unfortunately, none of those work. – Tom Lokhorst Aug 09 '11 at 07:37
sorry that it didn't help - then I suspect short of compiling your own WebKit-browser for iOS there is no solution since it seems to be some internal thing in iOS-WebKit... – Yahia Aug 11 '11 at 15:34

Remove 3 pixels in iOS/WebKit textarea

7 Answers7

Linked