Tip: Cajas de texto con imagen de fondo

Un pequeño truco visto en DhtmlGoodies (por cierto, apuntaos este sitio si no lo conociais pues si sois diseñadores web vais a encontrar de todo). La idea es usar hojas de estilo CSS para colocar una imagen de fondo en el input text y mejorar la apariencia del mismo. Con algo muy sencillo, se consigue un resultado espectacular. Estas cosas son las buenas.

Aqui un ejemplo:

<STYLE>
.searchBox
{
background-image:url('./magnifying-glass.gif');
background-repeat:no-repeat;
padding-left:25px;
border-width:1px;
border-style:solid;
border-color:#CC00AA;
}

.userBox
{
background-image:url('users.gif');
background-repeat:no-repeat;
padding-left:25px;
border-width:1px;
border-style:solid;
border-color:#CC0000;
}

TD
{
font-size:12px;
}

</STYLE>

<TABLE>
<TR>
<TD><input type="text" name="buscar" class="searchBox" size="18"></TD><TD>(Buscar)</TD>
</TR>
<TR>
<TD><input type="text" name="nombre" class="userBox" size="18"></TD><TD>(Tipo)</TD>
</TR>
</TABLE>

Relacionado | Text input con imagen de fondo