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.

Relacionados

Movimiento del browser al arrastrar en móviles

Movimiento del browser al arrastrar en móviles

Este es un comportamiento por defecto de los browsers para móviles, el cual al hacer algún tipo de arrastre extremo dentro del <body> (me refiero del extremo superior al inferior principalmente, ó si está en landscape de derecha a izquierda y viceversa) éste se mueve levemente con un efecto resorte, lo que eventualmente puede llegar [...]

Estilos para IE9, IE10 e IE11

Estilos para IE9, IE10 e IE11

Desde IE10 quer ya no existen los comentarios condicionales, ese útil invento de Microsoft para que nosotros desarrolladores front-end pudiéramos lidiar con los estilos específicos para IE5, 6, 7, 8…. y 9. Los quitaron porque creían que con IE10 todo estaba solucionado y volvían a abrazar los estándares, lo que fue en parte cierto. Pero [...]

IE v/s console

¿Cansado de soportar IE? Te entiendo, pero aún hay clientes que piden que sus proyectos se vean en estos browsers antiguos. Frustraciones aparte, cuando escribes Javascript y usas console.log() para debuggear tu código en la consola del browser, es usual que éstas funcionalidades se quiebren en IE8-. console.log(‘IE8- dará error por esto’); Solución 1 window.console [...]

  1. que simple, buenisimo!!!

    Felipe
    19 / Julio / 2010

  2. 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 !!!

    Juanin
    19 / Julio / 2010

  3. 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.

    jmn
    19 / Julio / 2010

  4. Excelente, muy bueno el tip :D

    Juan J. GOMEZ
    19 / Julio / 2010

  5. no estoy seguro, pero “rezise” , en un validador standar, lo toma como error.

    leviatan
    20 / Julio / 2010

  6. 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!

    ignatius
    24 / Julio / 2010

  7. 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.

    h r m
    28 / Julio / 2010

  8. Hola, ¿como hiciste ese antibot que tenes que arrastrar una imagen a un área determinada?

    Brian
    16 / Octubre / 2010

  9. 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ú

    María Claudia
    22 / Abril / 2011

OJO: si vas a agregar código fuente, asegúrate de convertirlas antes a entidades HTML, sino el comentario no se renderizará correctamente.

compartido 14 veces