Ocultando el tamaño del textarea resize handle en Safari

Question

Estoy usando componentes textarea en mi aplicación, y controlo su altura dinámicamente. 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 "manejar" 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 de si "manejar" es la palabra correcta, pero no puedo pensar en un mejor término.)

Answer 1

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

textarea 
{ 
    resize: none; 
} 

o simplemente

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

propiedades válidos son: ambos, horizontal, vertical, ninguna

Answer 2

el SAF La oportunidad de max-height max-width de ari también funciona en Firefox 4.0 (b3pre). buen ejemplo de la forma: http://www.alanedwardes.com/posts/safari-and-resizable-textboxes/

Answer 3

Utilice la siguiente regla CSS para desactivar este comportamiento para todos los TextArea elementos:

textarea { 
    resize: none; 
} 

Si desea desactivarlo para algunos (pero no todos) TextArea elementos, se tiene un par de opciones (gracias a this page).

Para desactivar una específica TextArea con el atributo name ajustado a foo (es decir, <TextArea name="foo"></TextArea>):

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

O, usando un ID (es decir, <TextArea id="foo"></TextArea>):

#foo { 
    resize: none; 
} 

Tenga en cuenta que este 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 TextArea.