Veamos como aplicar estilos variados a campos de formulario de texto de varias líneas (textarea) con CSS.
Con las hojas de estilo CSS se puede configurar el aspecto de cada elemento de una página web, de una manera muy detallada. En este taller de CSS vamos a aplicar estilos a los elementos de formulario Textarea, que son cajas de texto de varias líneas. Veremos varios estilos aplicados sobre textarea, comentando sus distintas propiedades CSS.
El objetivo de este taller no es explicar el modo de trabajo con CSS, sino más bien practicar con determinados atributos sobre los textarea. Se puede encontrar información básica para aprender a manejar las hojas de estilo en nuestro Manual de CSS. También disponemos de otros Talleres de CSS, donde aprender a utilizar esta tecnología por la práctica.
Antes que nada, podemos ver la página donde están aplicados los distintos estilos que vamos a comentar sobre elementos textarea.
Un textarea es un elemento de formulario, luego en principio deberíamos colocarlos entre <;form>; y <;/form>;. El código HTML más básico para un textarea es el siguiente:
<;textarea class=estilotextarea>;<;/textarea>;
Ya le hemos aplicado una clase de estilos CSS (estilotextarea), que definiremos en la declaración de estilos de la página:
.estilotextarea {width:400px;height:100px;border: 2px solid #990000;}
En esta declaración de estilos hemos indicado que el ancho de la caja de texto sea de 400 píxeles y que el alto sea de 100 píxeles. También hemos indicado un borde de 2 píxeles de tamaño y de color rojo oscuro.
El efecto es el siguiente:
Ahora veamos otro código HTML para incluir un textarea.
<;textarea class=estilotextarea2 cols="60" rows="8">;<;/textarea>;
En este caso, aparte que la clase para definir el estilo del textarea ha cambiado (estilotextarea2), también se está indicando unas filas y unas columnas como tamaño del textarea, con los atributos cols y rows. Como los textarea son líneas de texto de varias líneas, con cols se indica el número de caracteres en horizontal del textarea y con rows el número de filas o líneas.
Ahora el estilo para este textarea sería el siguiente:
.estilotextarea2 {width:300px;height:80px;border: 1px dotted #000099;}
Nos fijamos que con CSS hemos redefinido el ancho y alto, con los atributos width y height. Ahora bien, entre la definición con HTML de la altura y anchura en caracteres del textarea, y la definición con CSS de la altura y anchura en píxeles, manda lo que hemos definido con CSS. Esto es así generalmente en todos los casos de estilos que se redefinen con CSS, siempre acaban siendo las hojas de estilo las que predominan en el aspecto de los elementos de las webs.
Además, hemos declarado un borde con línea de puntos de 1 pixel de anchura en el textarea, de color rojo oscuro. El aspecto final de este textarea será el siguiente:
Ahora veamos un tercer ejemplo de textarea. Primero su código HTML:
<;textarea class=estilotextarea3 cols="30" rows="8">;Texto de prueba<;/textarea>;
Este textarea tiene de particularidad que aparecerá con un texto escrito dentro. Es decir, cuando se visualice en la página web, en lugar de estar vacío, tendrá escrito lo que hemos colocado entre <;textarea>; y <;/textarea>;, "Texto de prueba".
La clase que define el estilo de este textarea se puede ver a continuación:
.estilotextarea3 {font-family: Garamond,verdana;font-size: 18pt;font-weight: bold;letter-spacing: 5px;}
Como se puede ver, se han definido en esta ocasión varios estilos para las tipografías que se van a utilizar en el texto del textarea. En esta ocasión se ha definido una fuente garamond, y en su defecto, verdana. Un tamaño del texto de 18 puntos, negrita, y un espaciado entre letras de 5 píxeles.
El resultado se puede ver a continuación.
Para acabar, veremos un último textarea al que vamos a poner el fondo transparente y en el que vamos a modificar los colores de las barras de desplazamiento del textarea.
<;textarea class=estilotextarea4 cols="30" rows="5">;<;/textarea>;
Para definir el estilo hemos utilizado el siguiente CSS:
.estilotextarea4 {background-color: transparent;border: 1px solid #000000;scrollbar-arrow-color: #000066;scrollbar-base-color: #000033;scrollbar-dark-shadow-color: #336699;scrollbar-track-color: #666633;scrollbar-face-color: #cc9933;scrollbar-shadow-color: #DDDDDD;scrollbar-highlight-color: #CCCCCC;}
El color de fondo es transparente, por el atributo background-color: transparent; esto quiere decir, que el color del textarea tiene el mismo color que el fondo de la página donde está colocado. Si el textarea lo tenemos colocado sobre un fondo blanco, no observaremos ninguna diferencia con respecto a otros textareas, pero si lo tenemos sobre fondo de otro color, el textarea se verá de ese mismo color. Luego, se ha aplicado un borde de un píxel negro y con los restantes atributos se modifica el color de las barras de desplazamiento del textarea. Atención, que los estilos para barras de desplazamiento sólo funcionan en Internet Explorer.
El resultado se puede ver a continuación:
Con estos ejemplos hemos podido ver unas interesantes declaraciones de estilos para elementos textarea de formulario. Esperemos que os sirvan para hacer vuestros propios formularios con más estilo. Por cierto, que en el taller de CSS tenemos ejercicios para aplicar estilos a otros elementos de formulario, como los artículos Decorar un campo select de formulario con CSS, Estilizando formularios o Estilos en campos de texto.