Ocultar el controlador de cambio de tamaño del área de texto en Safari

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

Sin embargo, en Safari, hay una herramienta de "control" en la parte 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 de hacer una pregunta de stackoverflow. Esta herramienta es confusa y básicamente se interpone en el camino.

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

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

safari webkit css

— david.mchonechase
fuente

Respuestas:

177

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

— Tamas Czinege
fuente

No es estrictamente relevante aquí, pero Safari también respeta las propiedades CSS min-height, max-height, min-width y max-width para dejar habilitado el cambio de tamaño, pero establece límites sobre la medida en que puede cambiar el tamaño.

— stevemegson

¡Gracias! Estaba a punto de hacer la misma pregunta :)

— alex

¿Qué pasa si quiero mostrarlo al pasar el mouse después de haber configurado resize: none?

— Michael Forrest

@Michael Forrest: ¿ha probado textarea: hover {resize: heredar! Important; }? Nunca lo he probado, solo una suposición.

— Tamas Czinege

Una advertencia: no permitir que el usuario cambie el tamaño <textarea>en absoluto podría ser un problema de usabilidad. La configuración resize:vertical;suele ser una mejor opción. No debería estropear su diseño y le da al usuario una mayor sensación de control.

— Web_Designer

Use la siguiente regla CSS para deshabilitar este comportamiento para todos los TextAreaelementos:

textarea {
    resize: none;
}

Si quieres deshabilitarlo para algunos (pero no todos) TextAreaelementos, tienes un par de opciones (gracias a esta página ).

Para deshabilitar un específico TextAreacon el nameatributo establecido en foo(es decir, <TextArea name="foo"></TextArea>):

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

O, usando una identificación (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 controlador de cambio de tamaño a los TextAreacontroles.

— Gaurang P
fuente

-1

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

— fortrabbit-frank
fuente