Login/Register
Remove 3 pixels in iOS/WebKit textarea
Asked Answered
Solved ioswebkittextareapadding
D

7

25

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.

Dehisce answered 31/7, 2011 at 14:53 Comment(2)
Have you tried padding-left=0, padding-..=0, etc? Is this an iOS/WebKit problem or does this also happens with other platforms? – Presentative
@Presentative 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. – Dehisce
M
12

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!

Mekka answered 11/8, 2011 at 16:51 Comment(6)
I'm afraid I'll have to go with the text-indent: -3px; option. And serve that to iOS only. – Dehisce
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. – Mekka
@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. – Mekka
I think I'd actually put this content in with <style> tags with the platform specific css rendered there rather than load an external stylesheet with more header information than content. At a certain point it becomes more about what you can live with – if you absolutely must have that -3px on the textarea, then do it, but if it's not crucial, why add the additional overhead for a non-issue? – Mekka
text-indent only applies to the first line of text. This works fine in an <input>, but in a <textarea> 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. – Hazardous
Seems to be fixed by iOS 13. – Showily
M
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';
  }
}
Mcelhaney answered 18/3, 2014 at 15:34 Comment(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. – Caston
H
1

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);
Hypersonic answered 16/9, 2015 at 2:12 Comment(0)
Z
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;
    }
}
Zeus answered 5/5, 2017 at 10:59 Comment(0)
W
0

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;
}
Wilbanks answered 24/10, 2018 at 18:16 Comment(0)
D
-1

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; }
}
Deficiency answered 24/7, 2015 at 2:43 Comment(0)
G
-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

Gearing answered 4/8, 2011 at 20:54 Comment(2)
Sorry for the late response. But unfortunately, none of those work. – Dehisce
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... – Gearing

© 2022 - 2024 — McMap. All rights reserved.