Resplandor animado con transiciones CSS sobre elementos input

El siguiente ejemplo muestra cómo crear crear un resplandor que aparece al tener el foco un elemento input. La aparición de este resplandor o "glow" se realiza mediante transiciones CSS y el método box-shadow.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Glow input</title>
<head>
<style type="text/css">
input{
    font-size:18px;
    font-family: Arial, helvetica;
    outline:none;
    transition: all 0.75s ease-in-out;
    -webkit-transition: all 0.75s ease-in-out;
    -moz-transition: all 0.75s ease-in-out;
    border-radius:3px;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    border:1px solid rgba(0,0,0, 0.2);
    color:gray;
    background-color:#eee;
    padding: 3px;
}
 
input:focus {
    box-shadow: 0 0 10px #aaa;
    -webkit-box-shadow: 0 0 10px #aaa;
    -moz-box-shadow: 0 0 10px #aaa;
    border:1px solid #999;
    background-color:white;
}
</style>
</head>
 <body>
        Nombre: <input type="text"  name="usuario"  value="" />
</body>
</html>

Ver ejemplo en funcionamiento » »