Menu
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.
651
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!
197
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
