input[type="text"]:focus, input[type="password"]:focus, input[type="date"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="month"]:focus, input[type="week"]:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="time"]:focus, input[type="url"]:focus, textarea:focus {

    box-shadow: 0 0 5px #06c;

    border: 1px solid #94aebd;

}

​

.field{

    position: relative;

    list-style: none;

}

​

#username{

    width: 100%;

    height: 3.2em;

    padding-top: 1.2em;

    border-radius: 0;

    height: 2.5em;

    font-size: 1em;

    padding: 5px 15px;

    font-family: inherit;

    border: 1px solid #ccc;

    -webkit-appearance: none;

    color: rgba(0,0,0,0.75);

    transition: box-shadow 0.45s,border-color 0.45s ease-in-out;

}

​

label {

    position: absolute;

    bottom: 20px;

    left: 16px;

    z-index: 10;

    font-size: 14px;

    transform: translateY(50%);

    transition: ease-out .15s;

    transition-property: bottom, color, transform;

    cursor: text;

    font-size: 0.875rem;

    color: #4d4d4d;

    cursor: pointer;

    display: block;

    font-weight: normal;

    line-height: 1.5;

    margin-bottom: 0;

}

​

input:focus+label {

    bottom: 35px;

    font-size: 12px;

}