Redimensionado de textarea con CSS

Email this to someoneShare on FacebookShare on Google+Share on LinkedInTweet about this on Twitter

Una de las mejoras que ya han aplicado la mayoría de los navegadores web más utilizados como: Safari, Chrome, Firefox, Opera es la de redimensionar los textarea o cajas de texto mediante CSS. Seguro que como usuario ya te habrás encontrado con más de un formulario o caja de comentarios en la que en su esquina inferior derecha aparece un indicador, que permite arrastrar y modificar el tamaño de la caja para permitirnos entre otras cosas, hacer comentarios más largos sin estar pendientes de la barra de desplazamiento. Mejora que los diseñadores también agradecerán a la hora de crear/diseñar formularios.

textarea

CSS para controlar el redimensionado

Este efecto de redimensionado se consigue mediante la propiedad CSS3 resize la cual tiene las siguientes opciones: both, none, vertical, horizontal.

textarea { resize:both; } /* reescalado horizontal y vertical */
textarea { resize:none; } /* desactiva el reescalado */
textarea { resize:vertical; } /* reescalado solo vertical */
textarea { resize:horizontal; } /* reescaldo solo horizontal */

También se podría limitar las dimensiones del reescalado utilizando las propiedades: max-width, min-width, max-height y min-width.

textarea {
resize: vertical;
min-height: 50px;
max-height: 250px;
}

Un ejemplo práctico sería el de nuestro campo de texto que sólo se pueda redimensionar la altura y con un mínimo de 50px y un máximo de 250px de alto.

Sé la primera persona en comentar

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

De conformidad con lo establecido en la LOPD, Adpv Advertising Provider S.L. garantiza la adopción de las medidas necesarias para asegurar el tratamiento confidencial de los datos de carácter personal. Así mismo le informamos de la inclusión de sus datos en un fichero con la finalidad de mantener su relación negocial o contractual con Adpv Advertising Provider S.L. y de la posibilidad de ejercer los derechos de acceso, rectificación, cancelación y oposición en la siguiente dirección: Ercilla, 26, 1Dcha., 48011, Bilbao, Bizkaia. Privacidad.