Input Onfocus Onblur CSS

by Farzad Cyrus

HTML

<input class="normal" onfocus='this.className="focus"' onblur='this.className="blur"' />

CSS

.normal {
    margin:50px;
    padding:5px;
    width:200px;
    height:30px;
    line-height:30px;
    background:#ffffff;
    border:1px solid #cccccc;
}
.focus {
    margin:50px;
    padding:5px;
    width:300px;
    height:30px;
    line-height:30px;
    background:#ffffff;
    border:1px solid #cc0099;
}
.blur {
    margin:50px;
    padding:5px;
    width:200px;
    height:30px;
    line-height:30px;
    background:#f5f5f5;
    border:1px solid #bbbbbb;
}