Una manera de mejorar el aspecto de un formulario es introduciendo imágenes dentro de los campos input type=”text”. Lo único que necesitamos es crear la imagen y crear un estilo en CSS para el input.

Os pongo de ejemplo el código CSS que debéis utilizar para los cuatro campos del formulario de arriba que hice para un cliente:

<style type="text/css">

input.nombre {
padding-right: 50px;
background: url(nombre.gif);
background-repeat: no-repeat;
background-position: right bottom;
}

input.telefono {
padding-right: 50px;
background: url(telefono.gif);
background-repeat: no-repeat;
background-position: right bottom;
}

input.email {
padding-right: 50px;
background: url(email.gif);
background-repeat: no-repeat;
background-position: right bottom;
}

input.mensaje {
padding-bottom: 20px;
background: url(mensaje.gif);
background-repeat: no-repeat;
background-position: right bottom;
}

</style>

Por si no tenéis ni idea de utilizar clases en CSS, simplemente debéis hacer una llamada al nombre de la clase en el input, como ejemplo, en el campo de “nombre” quedaría así:

<input type="text" name="nombre" id="nombre" class="nombre" />

En este caso, el padding lo utilizaremos para que si el texto llega al gráfico no se superponga, de esta manera le decimos que haga un margen virtual de 50px (excepto en el caso del textarea), así cuando el texto llega al gráfico hay un momento en el que encuentra un límite antes de pisar el gráfico.

Con el textarea hacemos lo mismo, pero como no es posible utilizar el padding-right porque limitaría todo el espacio vertical del textarea, en vez de solo la última línea (en la que se encuentra el gráfico) haremos un padding-bottom con la altura del gráfico más un pequeño espacio que dejemos como margen entre el límite del texto y el gráfico, en este caso 20px. Así cuando el texto llegue abajo, no utilizará la línea en la que se encuentra la imagen.

Como podréis imaginar, se puede jugar con la posición de la imagen (background-position), si se repite como mosaico o no (background-repeat), y varias cosas más si sabemos manejar hojas de estilo CSS. Además no tiene por qué ser necesariamente una imagen con texto, un elemento simbólico también puede quedar muy bien, como una llave si es un capo para una contraseña, un sobrecito si es para poner el email, etc.

Esta entrada fue publicada el 24 Enero 2008 a las 6:32 PM y fue archivada en CSS. Puedes escribir un comentario, o trackback desde tu sitio web.