Variable Visions

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



RECENT ARTICLES:

PUBLISHED ON 03.3.20arrowWordpress and Woocommerce widget for inserting PHP in Elementor

PUBLISHED ON 09.5.19arrowWordpress and Woocommerce redirect to a product page from categories with a single product

TAGS

CATEGORIES