chtefi
8/2/2015 - 10:04 PM

Focus an input to trigger a nice effect below it (a blue border starting from the center to the edges)

Focus an input to trigger a nice effect below it (a blue border starting from the center to the edges)

input-focus.css
content_copyfile_download
/*

<div>
<input type="text" />
<span></span>
</div>

Check http://codepen.io/anon/pen/waRYXa?editors=110 for more example

*/

* { box-sizing: border-box; }
div { 
    position: relative;
    width: 400px;
}
input { width: 100%; border: 0; border-bottom: 1px solid #ccc; }
span {
    position: relative;
    bottom: 0;
    width: 0;
    left: 50%;
    background: blue;
    height: 2px;
    transition: width .5s, left .5s;
    display: block;
}
input:focus {
    outline: none;
}
input:focus + span {
    left: 0%;
    width: 100%;
}