Los navegadores actuales (Safari, Chrome, Firefox) están implementando nuevas funcionalidades para facilitar al usuario la interacción con el contenido. Una de estas características es la habilidad de redimensionar de los áreas de texto o textarea. Ahora veremos como controlar estar características utilizando CSS.
CSS para controlar el redimensionado
El control del redimensionado de los textarea se puede hacer utilizando la propiedad CSS3 llamada 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 */
Adicionalmente se podría limitar las dimensiones del reescalado utilizando las propiedades: max-width, min-width, max-height y min-width.
Por ejemplo si deseamos que nuestro campo de texto solo se pueda redimensionar la altura y con un mínimo de 60px y un máximo de 300px de alto.
textarea {
resize: vertical;
min-height: 60px;
max-height: 300px;
}
Esta propiedad esta disponible en las ultimas versiones de Safari, Chrome y Firefox.
Comentarios Total 1 comentario
Publicado: 03/10/2011 8:58 am
Ooooo que buena info, gracias por el aporte.