Blog* Si no supiésemos de lo que estamos hablando, no lo haríamos. :-)

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

Propiedad CSS3: resize
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

0 Comentarios

No existen comentarios a esta entrada. Sé el primero-a!!

Deja tu comentario:

  • Imagen de seguridad Cargar otra imagen