Iconos al Lado de los Link CSS – Personalizacion WEB

Si quieres agregar un icono al lado de tus link, solo tienes q escribir este código en tu css y listo, cada vez que agregues un link te pondrá un icono automáticamente al lado de este.

cambia el “.exe” por la extencion que quieras personalizar, puedes agregar tantas extenciones como quieras.

a[href$='.exe'] { 

	padding-left:20px;  

	background: transparent url(icons/icon_exe.gif) no-repeat center left;

}

Para los videos de Youtube y otros

a[href *="youtube.com/watch?"], a[href *="sevenload.com/videos/"], a[href *="metacafe.com/watch/"] { 

	padding-left:20px;  

	background: transparent url(icons/icon_film.gif) no-repeat center left;

}

Solo funciona en IE7 y Firefox

Cajas de texto con imagenes css

Quieres personalizar tus cajas de texto en tu pagina web al estilo de google, aqui te dejo el código:

Cajas Personalizadas con CSS

CSS

<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>

HTML

<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>