Tip Precoz 7: resize textarea ↩ CSSLab

Tip Precoz 7: resize textarea

Si usas seguido Safari ó Chrome, habrás notado que estos browsers permiten -por defecto- que el <textarea> sea redimensionado por el usuario a través del arrastre en el rincón inferior-derecho. Esta es una propiedad de WebKit de accesibilidad que puede perjudicar el layout de nuestro lindo formulario.

Para quitarlo, basta declarar en CSS:

textarea {
	resize: none;
}

Ver ejemplo
(En Safari-Chrome)

Sobre el Autor: Jorge Epuñan

Soy quien escribe en este sitio: diseñador gráfico de profesión, desarrollador web por preferencia y amante de la interacción humano-computador. Cuando no pienso en web, salgo a trotar por mis barrios en Santiago, Chile o me junto con amigos a un bar a conversar sobre nuevas tendencias y tecnologías. Twitter profesional y personal, además del Contacto.

Felipe 19 de Julio del 2010 a las 1:57 pm
que simple, buenisimo!!!
Juanin 19 de Julio del 2010 a las 3:19 pm
Buenísimo el tip, pero lamentablemente la version Beta de Firefox 4 no respeta esta caracteristica

Saludos y muchas gracias por todos tus buenos consejos !!!
jmn 19 de Julio del 2010 a las 4:10 pm
Igual la idea de ese feature es agregar una comodidad para el usuario, no creo que valga la pena sacarlo por cuidar el layout… si alguien lo intenta usar es porque lo debe necesitar.
Jorge Epuñan 19 de Julio del 2010 a las 4:18 pm
estuve pensando en incluirlo en mi CSS Reseter v2 pero como bien dice jmn puede q sirva, aunq es un feature arbitrario y sólo aplicable a algunos browsers. Enfin hay una delgada linea y lo meditare un poco más.
Juan J. GOMEZ 19 de Julio del 2010 a las 6:03 pm
Excelente, muy bueno el tip
leviatan 20 de Julio del 2010 a las 2:12 pm
no estoy seguro, pero “rezise” , en un validador standar, lo toma como error.
ignatius 24 de Julio del 2010 a las 11:44 am
Que bueno, no lo conocía. Yo suelo usar los max-height y max-width para limitar ese comportamiento. Normalmente limito el ancho para que no sea posible destrozar el layout.

Un saludo!
h r m 28 de Julio del 2010 a las 11:44 pm
Hola, me gusta mucho de blog, pero hace tiempo que no lo visitaba, me doy cuenta que cambiaste el diseño, pero hay algo que “creo” que no esta, o al menos no lo encuentro y es el enlace para poder ver los anteriores post’s.
Brian 16 de Octubre del 2010 a las 2:29 am
Hola, ¿como hiciste ese antibot que tenes que arrastrar una imagen a un área determinada?
Jorge Epuñan 21 de Octubre del 2010 a las 5:59 pm
Brian: es un plugin, Ajax Fancy Captcha.
María Claudia 22 de Abril del 2011 a las 1:54 am
Buenas noches… una consulta, espero no fuera mucho del tema. Quiero aplicar esto a mi blog en blogger para el formulario de comentarios incrustrado en página. Lo hacen con un iframe. ¿cómo podría hacer que la página que carga el iframe “herede” el CSS de la página principal?. Porque obviamente si pongo

textarea {resize:none;}

dentro del CSS del blog, no pasa nada porque el textarea es cargado desde un iframe, y por eso estoy buscando la forma de que hereden o forzar a utilizar el CSS del blog.

¿Alguna idea o de plano no se puede?

Espero haberme explicado bien
un saludo desde el Perú
Jorge Epuñan 22 de Abril del 2011 a las 6:01 pm
María Claudia: Lamentablemente lo q pides no es posible, no puedes intervenir el CSS dentro de un iframe desde una pagina padre, o vice-versa.