Controlar el redimensionado de textarea con CSS

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.

css
  1. textarea { resize:both; } /* reescalado horizontal y vertical */
  2. textarea { resize:none; } /* desactiva el reescalado */
  3. textarea { resize:vertical; } /* reescalado solo vertical */
  4. 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.

css
  1. textarea {
  2.    resize: vertical;
  3.    min-height: 60px;
  4.    max-height: 300px;
  5. }

Esta propiedad esta disponible en las ultimas versiones de Safari, Chrome y Firefox.

Comentarios Total 1 comentario


isra
Publicado: 03/10/2011 8:58 am

Ooooo que buena info, gracias por el aporte.

 

Comentar

En este blog los comentarios están moderados, serán mostrados cuando el administrador los apruebe. Por favor, evita comentarios ofensivos u obscenos por que no serán aprobados.
Si deseas publicar código fuente debes hacerlo entre las etiquedas <code> y </code>, además debes reemplazar los carácteres < por &lt; y > por &gt;.

(Requerido)

(Requerido, no será publicado)

(Requerido)

(Tags aceptados: <a> <em> <strong> <code> <ul> <li>)