Eliminar 3 píxeles en iOS/WebKit textarea
padding (7)
Aquí hay una solución rápida de JavaScript (basada en el enfoque de stslavik) que también guarda algunas líneas de código y pruebas para iPad y iPod.
Si usas jQuery:
if(/iPhone|iPad|iPod/i.test(navigator.userAgent)){
$(''textarea'').css(''text-indent'', ''-3px'');
}
Si desea utilizar 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'';
}
}
Estoy tratando de crear un área de textarea que se ve exactamente como 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 como tal (he ampliado):
Como muestra la captura de pantalla, hay 3 píxeles antes del texto del que quiero deshacerme. Por lo que puedo ver, no es el margen / relleno o el borde.
Esto sucede en mi iPhone y iPad, ambos con iOS 4.3. Y para ser claros; esos 3 píxeles adicionales no se muestran en Safari / Firefox / Chrome en mi escritorio. O el Windows Phone de mi hermano, para el caso.
EDITAR 2011-08-10:
Acabo de probar esto en un <input type=text> y aparece el mismo "relleno", excepto que es 1 píxel en lugar de 3.
Basado en las respuestas anteriores, parece que la mejor manera de abordar esto es agregando un margin-left: -3px al elemento textarea. Podemos hacer esto con algunos CSS, especialmente iOS Safari, que no arruinarán las cosas en 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;
}
Bien ... Lo siento ... Aquí vamos ... La respuesta oficialmente no oficial es ...
No puedes deshacerte de eso.
Aparentemente este es un "error" con el safari móvil en las entradas. Ver:
- <input type = "submit"> error de relleno en el móvil de Safari?
- ¿El relleno de <button> del iPhone es inmutable?
Usted puede, sin embargo, sabiendo la sangría hacer esto
textarea {
text-indent:-3px;
}
No es una solución bonita, pero hace lo que necesitas.
Editar Se olvidó de mencionar, probado con simulador de iOS. Puede probar en su propio teléfono.
Otro punto: esto también supone que estás ofreciendo css únicamente para safari móvil, específicamente para el iPhone. Una forma más antigua de hacer esto es:
/* Main CSS here */
/* iPhone CSS */
@media screen and (max-device-width: 480px){
/* iPhone only CSS here */
textarea {
text-indent: -3px;
}
}
Vuelva a editar. Me estoy divirtiendo demasiado con esto ... También puede usar hojas de estilo separadas 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, realmente no tengo problemas con las entradas de texto que tienen una sangría interna. Lo limpia del borde del área y lo hace más legible. Sin embargo, creo que un navegador debe soportar la especificación. Así que aquí hay una actualización para diferenciar entre Android y iPhone. ¡Que te diviertas!
No puedo probarlo ahora, pero intente
float: left;
y / o
border-width: 0;
y / o
padding: -3px;
EDITAR - otro intento:
-webkit-padding-start: 0px;
-webkit-margin-start: 0px;
text-indent: 0px;
border-spacing: 0px;
-webkit-border-horizontal-spacing: 0px;
outline-offset: 0px;
Para obtener una referencia que incluya información sobre compatibilidad, visite http://developer.apple.com/library/safari/#documentation/appleapplications/reference/SafariCSSRef/Introduction.html#//apple_ref/doc/uid/TP30001267-SW1
Por lo tanto, 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 ve afectado. Si agrega una línea adicional, ayuda a restablecer la sangría adicional para dispositivos iOS. Probablemente tendrá que hacer algún otro asistente para permitir otros dispositivos táctiles de ancho superior a 480px.
@media only screen and (max-device-width: 480px) {
textarea {text-indent: -3px;}
textarea::-webkit-input-placeholder { text-indent: 0px; }
}
Una solución alternativa es utilizar un div que establezca 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);
text-intend no funciona cuando se tienen varias líneas (como mencionó Jonathan en un comentario en la respuesta aceptada).
Entonces, esto me funcionó en iPhone 6:
textarea {
margin-left: -3px;
&::placeholder {
padding-left: 3px;
}
}