Si sois de los que usais como navegadores en Internet: Chrome o Firefox, habréis notado que en las áreas para poder escribir de los formularios de tipo contacto o como el de comentarios, aparece en la esquina derecha-abajo un pequeño símbolo que si tiramos de él con el ratón, modificamos las propiedades de altura y anchura de ese área de texto.
Para poder evitar o condicionar esas modificaciones, debemos usar nuestra hoja de estilos CSS, añadiéndole la propiedad de resize.
Habitualmente, a las áreas de texto, se le asigna una clase de estilo, para darle color de fondo, borde, letra, etc... pués si le añadimos la propiedad resize, conseguiremos evitar o limitar la modificación del área de texto.
Aquí os dejo el código para poder modificar la propiedad:
.area_de_texto {
background-color: #000;
border: 1px solid #333;
color: #EEE;
margin: 10px auto;
overflow: hidden;
padding: 10px;
width: 175px;
resize: VALOR;
}
Debéis cambiar la palabra "VALOR" por los siguientes:
- both: Sirve para poder modificar los valores de altura y anchura
- horizontal: Para poder solo ampliar el área en sentido horizontal
- vertical: Para poder modificar el área en sentido vertical
En el caso de que quisieramos limitar el área a un tamaño máximo o mínimo en altura o anchura, deberíamos añadir también la propiedad:
max-width: 400px Con esto conseguimos ampliar el area hasta 400 px
max-height: 400px Con este código limitamos la altura a un máximo de 400 px
min-width: 50px Con este código limitamos el ancho a un mínimo de 50 px
min-height: 50px Limitamos la altura a un mínimo de 50 px
