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):
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.
Best Answer
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
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:
Edit Again I'm having way too much fun with this... You can also use separate stylesheets with these declarations:
Edit Because apparently somebody bought an Android ;)
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!