Home / Links / http://html5snippets.com / Input Glow

<style type="text/css">
/*<![CDATA[*/
.input-glow {
    font-size:18px;
    font-family: helvetica;
    outline:none;
    transition: all 0.25s ease-in-out;
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s 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-glow:focus {
    box-shadow: 0 0 15px green;
    -webkit-box-shadow: 0 0 15px green;
    -moz-box-shadow: 0 0 15px green;
    border:1px solid green;
    background-color:white;
}
/*]]>*/
</style>

<div>
    Username<br />
    <input type="text" class="input-glow" name="username" />
</div>