Eliminar 3 píxeles en iOS / WebKit textarea

Estoy intentando crear un área de textarea que se parezca exactamente a un div .

Sin embargo, en iOS hay 3 píxeles procedentes de algún lugar que no puedo eliminar.

Aquí está mi código:

 <!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> 

Esto se representa así (he ampliado):

3 píxeles adicionales

Como muestra la captura de pantalla, hay 3 píxeles antes del text del que quiero deshacerme. Por lo que puedo ver, no es el margen / relleno o borde.

Esto sucede en mi iPhone y iPad, ambos con iOS 4.3. Y para ser claros; esos 3 píxeles adicionales no aparecen en Safari / Firefox / Chrome en mi escritorio. O el Windows Phone de mi hermano, para el caso.

EDIT 08-08-2011:
Acabo de probar esto en un <input type=text> y aparece el mismo "relleno", excepto que es de 1 píxel en lugar de 3.

Está bien … Lo siento … Aquí vamos … La respuesta oficialmente no oficial es …

No puedes deshacerte de eso.

Al parecer, este es un "error" con safari mobile en las inputs. Ver:

  • <input type = "submit"> error de relleno en Safari mobile?
  • iPhone <button> padding unchangeable?

Sin embargo, puedes saber que la sangría hace esto.

 textarea { text-indent:-3px; } 

No es una solución bonita, pero hace lo que necesita.

Editar Olvidé mencionar, probado con iOS Simulator. Puede probar en su propio teléfono.

Otro punto: Esto también supone que estás sirviendo css únicamente para safari mobile, específicamente para el iPhone. Una forma más antigua de hacerlo es:

 /* Main CSS here */ /* iPhone CSS */ @media screen and (max-device-width: 480px){ /* iPhone only CSS here */ textarea { text-indent: -3px; } } 

Edit Again Me estoy divirtiendo mucho con esto … También puedes usar hojas de estilo por separado con estas declaraciones:

 <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"> 

Editar Porque aparentemente alguien compró un 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> 

Personalmente, no tengo un problema con las inputs de text que tienen una sangría interna. Lo borra del borde del área y lo hace más legible. Sin embargo, creo que un browser debe admitir la especificación. Así que aquí hay una actualización para diferenciar entre Android e iPhone. ¡Que te diviertas!

Aquí hay una solución rápida de JavaScript (basada en el enfoque de stslavik) que guarda algunas líneas de código y testings para iPad y iPod también.

Si usas jQuery:

 if(/iPhone|iPad|iPod/i.test(navigator.userAgent)){ $('textarea').css('text-indent', '-3px'); } 

Si desea usar JS estándar:

 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'; } } 

text-intend no funciona cuando se tienen varias líneas, (como Jonathan mencionó en un comentario en la respuesta aceptada).

Entonces, esto funcionó para mí en iPhone 6:

 textarea { margin-left: -3px; &::placeholder { padding-left: 3px; } } 

No puedo probarlo ahora mismo, pero testing

 float: left; 

y / o

 border-width: 0; 

y / o

 padding: -3px; 

EDITAR: otro bash:

 -webkit-padding-start: 0px; -webkit-margin-start: 0px; text-indent: 0px; border-spacing: 0px; -webkit-border-horizontal-spacing: 0px; outline-offset: 0px; 

Para get una reference que incluya información de compatibilidad, consulte http://developer.apple.com/library/safari/#documentation/appleapplications/reference/SafariCSSRef/Introduction.html#//apple_ref/doc/uid/TP30001267-SW1

Entonces, una solución css pura que se basa en los ya mencionados. Sin embargo, la text-indent solo hace mucho por mí, ya que el placeholder no se efectúa. Si agrega una línea adicional, ayuda a restablecer la sangría adicional para dispositivos iOS. Probablemente tenga que hacer algún otro wizard para permitir otros dispositivos táctiles de anchos por encima de 480px.

 @media only screen and (max-device-width: 480px) { textarea {text-indent: -3px;} textarea::-webkit-input-placeholder { text-indent: 0px; } } 

Una solución es usar un div que puedes configurar como 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);