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:

Select Code
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:

Select Code
<textarea name="caja" id="caja" rows="5" cols="50"></textarea>


Select Code
.textarea {

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

Ejemplo de su funcionamiento

CSS3 Resize: 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.

Si te ha gustado este artículo, puedes recibir gratis más y mejor por RSS, Twitter, Facebook o correo electrónico. ¡Muchas gracias por leerme!