Notes-style-brax

by sanford

HTML

<form>
<input id="inp1" type="text" value="vaal"><label for="inp1">Label 1</label>
<input id="inp2" type="text" value=""><label for="inp2">Label 2</label>
<textarea id="inp3">sta</textarea><label for="inp3">Label 3</label>
</form>

CSS

body { padding: 20px; font: 12px/31px Verdana;}
form {
    width: 400px;
    display: block;
    height: auto;
}
textarea,input,label {
    display: block;
    ZZoutline: steelblue dotted 1px;
    float: right;
    border: 1px solid transparent;
        margin-top: 20px;    
    }
input,label {
        height: 22px;
}
textarea {
    height: 100px;
}
textarea,input {
    margin-left: 20px;
    width: 200px;
    border: 1px solid silver;
    padding-left: 6px;
    padding-top: 5px;
    font: 11px/22px Verdana;
    clear:right;
    
}
label {
    position: relative;
}
label:after,label:before {
    height: 18px;
    width: 28px;
    content: " ";
    border-color: tomato;
    border-color: rgba(218,112,214,.5);
    opacity: 0;
    display: none;
    position: absolute;
    -moz-transition: all 40ms;
}
label:before {
    border-width: 2px 2px 0 0;
    right:-234px;
    top: -6px;
     border-style: solid;   
}
label:after {
    border-width: 0 0 2px 2px;
    right:-46px;
    top: 13px;
    border-style: solid;
}
textarea + label:after {
    top: 91px;
}
textarea:focus,input:focus {
    border: 1px solid tomato;
    outline: none;
    background: lemonchiffon;
}    
input:focus + label:after
,input:focus + label:before
,textarea:focus + label:after
,textarea:focus + label:before
{
    border-color: rgba(255,99,71,1);    
}

input:hover /* ie8 */
,textarea:hover /* ie8 */
,input:focus + label:after
,input:focus + label:before 
,textarea:focus + label:after
,textarea:focus + label:before {
    opacity: 1;
    display: block;
    -webkit-transition: all 340ms;
}