Fondo para campos textarea en CSS

Mediante las propiedades de las hojas de estilo en cascada (CSS) podemos especificar imágenes de fondo para los campos textarea de los formularios. Basta con defnir un estilo para el elemento textarea, y asignar a la propiedad background-image la URL de la imagen.

Jugando con los eventos onMouseOver y onMouseOut se puede hacer que la imagen cambie cuando el puntero del ratón pasa por encima del cuadro de texto.

También se pueden asignar valores al color del texto que se introduce en el cuadro de texto. Jugando con este ejemplo se puede personalizar el aspecto de los campos textarea para adaptarlos al de la página.

Es necesario añadir el siguiente código a la página HTML, entre <head> y </head>:

<style TYPE="text/css">

/* FONDO PARA TEXTAREA Iván Nieto Pérez
Este script y otros muchos pueden descarse on-line de forma gratuita
en El Código: www.elcodigo.net
*/

textarea.imagenInicio {
 background-color: #000000;
 background-image: url( /images/fondostars.jpg );
 color: #ffffff;
}

textarea.imagenFoco {
 background-color: #000000;
 background-image: url( /images/fondocielo.jpg );
 color: #ffffff;
}

</style>

Es necesario añadir el siguiente código a la página HTML, entre <body> y </body>:

<form>
<textarea rows="12" cols="8" class="imagenInicio" onMouseOver="this.className='imagenFoco'" onMouseOut="this.className='imagenInicio'">
Ejemplo de textarea con fondo.
Al pasar el puntero por encima, el fondo cambia.
</textarea>
</form>

Autor: Iván Nieto Pérez
http://www.elcodigo.net/cgi-bin/DBread.cgi?tabla=scripts&campo=0&clave=161&info=1http://www.elcodigo.net/cgi-bin/DBread.cgi?tabla=scripts&campo=0&clave=161&info=1

Usuarios que han visto este tema también han visto...

- Maquetación CSS
- Cómo usar distintos colores en un select menu con CSS?
- Superposición de imágenes con CSS
- Efecto zoom de imagen utilizando solo CSS
- Elementos AFTER y BEFORE en CSS

- Versión imprimible de este documento

- Enviar por e-mail este documento