Foros del Web - Ver Mensaje Individual - Google: efecto celeste en cuadro de busqueda

emprear · #5 (**permalink**) 02/03/2012, 18:37

Cita:

Iniciado por trylogy_3000

hay una forma mas facil :

yo uso html5 y css3 y le da un efecto mas realista.

Código HTML:

Ver original<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#buscador{
border: solid 1px blue;
}
#buscador:focus{
border: solid 1px blue;
-webkit-box-shadow:0px 0px 10px blue; //-webkit- para chrome
-o-box-shadow:0px 0px 10px blue; //-o- para opera
-moz-box-shadow:0px 0px 10px blue; //-moz- para mozilla
box-shadow:0px 0px 10px blue; //para los que soportan css3
}
</style>
</head>
<body>
<form action="">
<input type="text" id="buscador" name="buscador">
</form>
</body>
</html>

si quieres que brille mas solo cambia el 10px por un numero mayor y si quieres que brille menos cambialo por un numero menor.
y si quieres que el brillo aparesca hacia abajo o hacia arriba cambia los 0px 0px.

Desde cuando css3 es exclusivo de html5 ?
Lindo ejemplo. pero no se atiene a lo preguntado por @Virtualforos
Sería interesante verlo funcionar en IE, Opera y Firefox, ya que solo lo hace en Chrome y Safari

Te sugiero probar tu código antes de presentarlo