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.
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.
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.
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.
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.
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.
Usuarios que han visto este tema también han visto...
- Textos con gradiente usando CSS
- Aplicar los estilos a diferentes dispositivos con CSS
- wrapScroll: Desplazamiento automático de DIV’s con CSS
- Cómo usar distintos colores en un select menu con CSS?
- Maquetar una galería de fotos con CSS usando listas
- Versión imprimible de este documento
- Enviar por e-mail este documento
Información legal | Política de Privacidad | Contacte con nosotros
Otro proyecto de Factoría de Internet. Copyright© 2003-2008 Factoría de Internet S.L.. Todos los derechos reservados.