input-focus-state

by sanford

HTML

test <input type="text"> <span>rest</span>
<input type="text" class="" value="val">
<input type="text" class="firefocus" value="val">
<img src="http://placekitten.com/150/150">

CSS

*
{   font-size: 12px;
    font-family: arial;
}
SPAN {
    line-height: 4;
}
INPUT {
    ZZdisplay: block;
        padding: 3px;
    margin: 5px;
    font-size: 12px;
    border-top: 1px solid gray;
    border-right: 1px solid silver;
    border-bottom: 1px solid silver;
    border-left: 1px solid gray;
    border-bottom-right-radius: 0;
    ZZbackground-color: red; 
background-repeat: repeat-x;
    background-position: center 100%;
    top: 1px;
}

INPUT.firefocus,INPUT:focus {
    Zmargin: 3px 5px;
    font-size: 15px;
    ZZheight: 22px;
    border-top: 1px solid darkorange;
    border-right: 1px solid burlywood;
    border-bottom: 1px solid burlywood;
    border-left: 1px solid darkorange;
        ZZ-moz-box-shadow:  0px 3px 3px 1px tomato;       
    -moz-transition: all 150ms;
    background: lemonchiffon;
    position: relative;
    ZZmargin-left: -4px;
    outline: tomato double 3px;
    outline-offset: 1px;
}
INPUT:focus  + SPAN + INPUT {
    ZZmargin-left: -32px;
}