Articles CSS Style-your-form-fields-with-CSS3

---

tutorials - CSS and Web-Development.

Style your form fields with CSS3

Published Tue. Sep. 11, 2012

---

The below CSS styles specific form types upon focus, hover and blur. The below form field with javascript also uses onfocus and onblur to remove the "Insert Text Here" from within the field.

input[type=text], input[type=password] {
    border: 1px solid !important;
    border-color: #aaafb9 #d4d7db #d4d7db #d4d7db !important;
    margin-bottom: 10px !important;
    padding: 6px !important;
    border-radius: 2px !important;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.3) !important;
    background: #F7F7F7 !important;
    -moz-transition-duration: .5s;
    -moz-transition-property: all;
    -webkit-transition-property: all;
    -webkit-transition-duration: .5s;
    -o-transition-property: all;
    -o-transition-duration: .5s;
    width: 96% !important;
    background: #FFF !important;
    color: #000 !important;
}
input[type=text]:focus, input[type=password]:focus {
    border: 1px solid #006699 !important;
    box-shadow: 0 0 5px #006699 !important;
    background:  #FFF !important;
    color: #000 !important;
    -moz-transition-duration: .5s;
    -moz-transition-property: all;
    -webkit-transition-property: all;
    -webkit-transition-duration: .5s;
    -o-transition-property: all;
    -o-transition-duration: .5s;
}



input[type=submit], input[type=reset] {
    background: #006699 !important;
    color: #FFF !important;
    border: 0;
    padding: 6px;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
    -moz-transition-duration: .5s;
    -moz-transition-property: all;
    -webkit-transition-property: all;
    -webkit-transition-duration: .5s;
    -o-transition-property: all;
    -o-transition-duration: .5s;
}
input[type=submit]:hover {
    background: #333 !important;
    color: #FFF !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.6) !important;
    -moz-transition-duration: .5s;
    -moz-transition-property: all;
    -webkit-transition-property: all;
    -webkit-transition-duration: .5s;
    -o-transition-property: all;
    -o-transition-duration: .5s;
    cursor: pointer;
}

---

<p>TITLE (url): <br />
<input type="text" name="title" id=" title" size="85" value="Insert Text Here" onfocus="if (this.value == 'Insert Text Here') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Insert Text Here';}"/>
</p>

<input type="submit" value="SUBMIT" />

Tag(s): onfocus, onblur, focus, blur, CSS attribute selector