200452424-001

Los forms (cajas de texto) en cada navegador se ven distinto, así que, ¿Por qué no aplicarle un poco de personalidad?. Simplemente vamos a aplicarle CSS para que parezca más bonito y no cambie según cada navegador. El resultado sería algo parecido a esto:

Si no lo puedes ver, aquí va una imagen:

forms-css

El código CSS a incluir es:

form.example input {
	background: url('box.gif') no-repeat 0 -58px;
	border: none;
	width: 241px;
	height: 20px;
	padding-left: 3px;
	padding-top: 3px;
}

form.example input:focus {
	background-color: transparent;
}

El código HTML es:

<form action="#" class="example">
<input />
</form>

Ahora debemos subir la imagen box.gif a nuestro servidor. Si se cambia el directorio de la imagen que está por defecto en el código CSS, debemos cambiar también la ubicación de la imagen en el servidor. Cabe decir que esa imagen puede ser modificada a nuestro gusto, así nuestras cajas de texto serán todavía más únicas dependiendo de nuestro estilo.

Listo, ya tendremos nuestro form vestido con estilo.