Al igual que podemos redimensionar ventanas en el sistema operativo, con la propiedad resize podremos hacer lo mismo, pero con las cajas de texto (textarea). Esta propiedad, una nueva característica de la interfaz de usuario de CSS3, nos permitirá agrandar o hacer más pequeñas las cajas de texto, con el cursor. Por ahora únicamente está disponible para Firefox 4 (además de todos los navegadores que  utilicen el motor WebKit, como Safari 3 y Chrome), aunque esperemos que en el futuro se haga compatible con todos los navegadores del mercado.

Estructura

La estructura de la propiedad resize es esta:

resize: [valor];

Los valores posible son:

  • none
  • both: Ambas redimensiones, tango vertical como horizontal.
  • horizontal: Únicamente redimensión horizontal
  • vertical:  Únicamente redimensión vertical
  • inherit: Desactivar redimensión.

Un ejemplo sería este, primero la estructura HTML:

<textarea name="caja" id="caja" rows="5" cols="50"></textarea>
.textarea {

overflow: auto ;
resize: both ;
 moz-resize: both ;
 -webkit-resize: both ;
}

Ejemplo de su funcionamiento

Si lo deseáis podéis ver otro método para redimensionar. Espero que os haya gustado el artículo, si tenéis dudas podéis escribirlas en los comentarios o mejor, preguntarlas en el foro de la comunidad.