Home/ Questions/Q 6245281
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T12:28:38+00:00

I’m trying to create a textarea that looks exactly like a div . However,

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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!

    • 0