Eliminar 3 píxeles en iOS/WebKit textarea

Estoy tratando de crear un textarea que se ve exactamente como div.Eliminar 3 píxeles en iOS/WebKit textarea

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 rinde al igual que (he acercado):

3 extra pixels

como la pantalla de espectáculos, hay 3 píxeles antes de que el texto que me querer deshacerse de. 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 claro; 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 la misma cosa "relleno", excepto que es de 1 píxel en lugar de 3.

Fuente

2011-07-31 Tom Lokhorst

¿Ha intentado padding-left = 0, el relleno - .. = 0, etc? ¿Es esto un problema de iOS/WebKit o esto también sucede con otras plataformas? – lm2s

@ lm2s Sí, el relleno es 0 (ver el código). No tengo otros dispositivos móviles para probar, pero en mi escritorio no hay espacios adicionales en Safari, Firefox o Chrome. –

bien ... Lo siento ... Aquí vamos ... El oficial respuesta no oficial es ...

No puede deshacerse de él.

Aparentemente esto es un "error" con safari móvil en las entradas. Ver:

Puede, sin embargo, conociendo el guión hacerlo

textarea { 
    text-indent:-3px; 
}

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

Editar Olvidé mencionarlo, probado con el simulador de iOS. Puede probar en su teléfono.

Otro punto: esto también asume que está sirviendo css únicamente para safari móvil, específicamente para el iPhone. Una forma 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; 
    } 
}

Editar Una vez más estoy teniendo demasiado divertido con esto ... También puede utilizar 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 al parecer 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 un problema con las entradas de texto que tienen alguna sangría interna. Lo borra de la zona y lo hace más legible. Sin embargo, creo que un navegador debería ser compatible con las especificaciones. Así que aquí hay una actualización para diferenciar entre Android y iPhone. ¡Que te diviertas!

Fuente

2011-08-11 16:51:21 stslavik

Me temo que tendré para ir con la opción 'text-indent: -3px;'. Y sirve eso solo para iOS. –

No es una opción terrible: similar a servir estilos específicos para IE7/8/9. Simplemente no es bonito. Hasta que Mobile-Safari comience a renderizar de forma más precisa, de todos modos. – stslavik

Eso es genial, a menos que quieras que funcione también en Android. – defrex

-1

no pueden probar que en este momento, pero trate

float: left;

y/o

border-width: 0;

y/o

padding: -3px;

EDITAR - otra oportunidad:

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

Para una referencia que incluye información sobre la compatibilidad ver http://developer.apple.com/library/safari/#documentation/appleapplications/reference/SafariCSSRef/Introduction.html#//apple_ref/doc/uid/TP30001267-SW1

Fuente

2011-08-04 20:54:01 Yahia

Perdón por la respuesta tardía. Pero desafortunadamente, ninguno de esos funciona. –

por favor vea mi edición de arriba. – Yahia

Es un buen intento, pero no hay dados. Los 3 píxeles aún permanecen. –

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

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

Fuente

2014-03-18 15:34:20 saschoar

Esta es la solución que uso y funciona muy bien. Estoy usando 'margin-left: -3px' en lugar de' text-indent', pero la misma idea, gracias. – skcin7

-1

Por lo tanto, una solución css puro que se basa en los ya mencionados. Sin embargo, el 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 tenga que hacer algún otro asistente mágico para permitir otros dispositivos táctiles de anchos superiores a 480px.

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

Fuente

2015-07-24 02:43:48

Una alternativa es utilizar un div que haya configurado 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);

Fuente

2015-09-16 02:12:11

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

Por lo tanto, esto funcionó para mí en el iPhone 6:

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

Fuente

2017-05-05 10:59:46

Eliminar 3 píxeles en iOS/WebKit textarea

Respuesta

Cuestiones relacionadas