Cajas de texto con imágenes al estilo de google

closeHola! hace 7 years 2 months 15 days que escribí esta entrada, puede que esta información ya no sea valida en la actualidad, por favor se comprensivo conmigo cuando comentes 🙂

Google ofrece un buscador personalizado que contiene el logo “Google” en su interior, hoy les dejo un código CSS para hacer un efecto similar.

 
<style>
.searchBox
{
background-image:url('http://www.google.com/images/poweredby_transparent/poweredby_FFFFFF.gif');
background-repeat:no-repeat;
background-color:#FFFFFF;
color:#000000;
padding-left:70px;
border-width:1px;
height:20px;
border-style:solid;
border-color:#000000;
 
}
 
.userBox
{
background-image:url('img2.png');
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>(Google)</td>
</tr>
<tr>
<td><input type="text" name="nombre" class="userBox" size="18"/></td><td>(Personalizado)</td>
</tr>
</table>

Resultado

You may also like...

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *