¿Cómo desactivo la propiedad de tamaño variable de un área de texto?
Quiero deshabilitar la propiedad redimensionable de un archivo textarea.
Actualmente, puedo cambiar el tamaño textareahaciendo clic en la esquina inferior derecha textareay arrastrando el mouse. ¿Cómo puedo desactivar esto?
La siguiente regla CSS deshabilita el comportamiento de cambio de tamaño de textarealos elementos:
textarea {
resize: none;
}
Para desactivarlo para algunos (pero no para todos) textarea, hay un par de opciones .
Puede utilizar classel atributo en su etiqueta ( <textarea class="textarea1">):
.textarea1 {
resize: none;
}
Para deshabilitar un específico textareacon el nameatributo establecido en foo(es decir, <textarea name="foo"></textarea>):
textarea[name=foo] {
resize: none;
}
O, usando un idatributo (es decir, <textarea id="foo"></textarea>):
#foo {
resize: none;
}
La página del W3C enumera posibles valores para las restricciones de cambio de tamaño: ninguno, ambos, horizontal, vertical y heredar:
textarea {
resize: vertical; /* user can resize vertically, but width is fixed */
}
Revise una página de compatibilidad decente para ver qué navegadores admiten actualmente esta función. Como ha comentado Jon Hulka, las dimensiones se pueden restringir aún más en CSS usando ancho máximo, altura máxima, ancho mínimo y altura mínima.
Súper importante saber:
Esta propiedad no hace nada a menos que la propiedad de desbordamiento no sea visible, que es la opción predeterminada para la mayoría de los elementos. Por lo general, para usar esto, tendrás que configurar algo como overflow: scroll;
Cita de Sara Cope, http://css-tricks.com/almanac/properties/r/resize/
Encontré dos cosas:
Primero
textarea{resize: none}
Se trata de un CSS 3, que aún no se ha lanzado , compatible con Firefox 4 (y posteriores), Chrome y Safari .
Otra característica del formato es overflow: autodeshacerse de la barra de desplazamiento derecha, teniendo en cuenta el atributo dir .
Código y diferentes navegadores.
HTML básico
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<textarea style="overflow:auto;resize:none" rows="13" cols="20"></textarea>
</body>
</html>
Algunos navegadores
- Internet Explorer 8
- Firefox 17.0.1
- Cromo
