Evitar la modificación del tamaño en un textarea
Publicado por estilorama*, el Martes 27 de Septiembre de 2011
Vamos a ver un truco CSS3 muy sencillo (no funciona en versiones anteriores de CSS) para evitar la redimensión de un textarea.
En las últimas versiones de los navegadores habrás podido comprobar que en las áreas de texto (etiqueta html: textarea) de los formularios aparece un control en su esquina inferior derecha que permite pulsar y arrastrar con el ratón para modifcar su tamaño.
Éste comportamiento, en general, es completamente indeseado pues normalmente existe un diseño al que ceñirse y redimensionar elementos internos puede llegar a romper la maquetación. Todo depende del diseño y cómo esté maquetado; pero personalmente nunca se me presento la necesidad de tener un textarea redimensionable.
Podemos utilizar la propiedad CSS3 resize y evitar o definir este comportamiento. La propiedad resize define si un elemento es redimensionable o no, y en caso de serlo en qué ejes.
CSS3
| resize:none; | El elemento no es redimensionable. |
| resize:both; | El elemento es redimensionable en ambos ejes. |
| resize:horizontal; | El elemento es redimensionable en el eje horizontal. |
| resize:vertical; | El elemento es redimensionable en el eje vertical. |
| resize:inherit; | El elemento hereda la propiedad de redimensión de la cascada CSS. |
Evitar textarea redimensionable
Como hemos visto, para evitar la redimensión de un textarea (o de todos) simplemente debemos dar la propiedad resize:none; al selector CSS apropiado.
Categoría: CSS | Compartir: Facebook, del.icio.us, Technorati, Yahoo, Menéame, Google
2 Comentarios
estilorama* el Lunes 25 de Marzo de 2013 a las 17:43:00
Buenas Dathus, disculpa la tardanza. La propiedad resize es exclusiva de CSS3, luego no es compatible con CSS2. Dentro de CSS3 nos encontramos que aún no es un estándar de todos los navegadores por lo que unos lo representarán como Firefox, Chrome y Safari; y otros, desgraciadamente no, como son Internet Explorer y Ópera. Si bien, en las últimas versiones puede que hayan incluido esta propiedad, no podemos garantizar que así sea en todos ellos. Por lo tanto te diría: Utiliza esta propiedad sólo como mejora en aquellos navegadores compatibles. Nunca como funcionalidad requerida. Da un tamaño amplio a los textareas que así lo requieran (esto es compatible con todos los navegadores). En caso de ser requerida la funcionalidad de redimensión del textarea por extrema necesidad, habrá que tratar de hacerla con JS; pero eso ya es otro tema.
Dathus el Viernes 22 de Marzo de 2013 a las 09:25:50
En firefox, en el quadro de textarea, abajo a la derecha sale para redimensionar, como puedo hacerlo para que en los otros nevegadores salga igual?