propiedades - Ocultar el tamaño de textarea resize handle en Safari

textarea html propiedades

Question

Estoy usando componentes textarea en mi aplicación, y controlo su altura de forma dinámica. A medida que el usuario escribe, la altura aumenta siempre que hay suficiente texto. Esto funciona bien en IE, Firefox y Safari.

Sin embargo, en Safari, hay una herramienta de "control" en la esquina inferior derecha que permite al usuario cambiar el tamaño del área de texto haciendo clic y arrastrando. También noté este problema con el área de texto en la página Askover Question de stackoverflow. Esta herramienta es confusa y básicamente se interpone en el camino.

Entonces, ¿hay alguna forma de ocultar este mango de cambio de tamaño?

(No estoy seguro si "manejar" es la palabra correcta, pero no puedo pensar en un término mejor).

Answer 1

Puede anular el comportamiento de cambio de tamaño con CSS:

textarea
{
   resize: none;
}

o simplemente

<textarea style="resize: none;">TEXT TEXT TEXT</textarea>

Las propiedades válidas son: ambas, horizontal, vertical, ninguna

Answer 2

Use la siguiente regla CSS para deshabilitar este comportamiento para todos los elementos de TextArea :

textarea {
    resize: none;
}

Si desea desactivarlo para algunos (pero no todos) elementos de TextArea , tiene un par de opciones (gracias a esta página ).

Para deshabilitar un área de texto específica con el atributo de name establecido en foo (es decir, <TextArea name="foo"></TextArea> ):

textarea[name=foo] {
    resize: none;
}

O bien, utilizando una ID (es decir, <TextArea id="foo"></TextArea> ):

#foo {
    resize: none;
}

Tenga en cuenta que esto solo es relevante para los navegadores basados ​​en WebKit (es decir, Safari y Chrome), que agregan el control de cambio de tamaño a los controles de TextArea .

Answer 3

la oportunidad de max-height max-width de safari también funciona en Firefox 4.0 (b3pre). buen ejemplo aquí por cierto: http://www.alanedwardes.com/posts/safari-and-resizable-textboxes/