Remove 3 pixels in iOS/WebKit textarea

user_2597 0
Viewed 6843

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.

padding webkit textarea ios
7 Answers

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