Style Form Fields

Here is a good article:
http://www.sitepoint.com/style-web-forms-css/

.sections section{float:left; width:100%; margin: 0 0 15px 0;}
.sections section > *{float:left}
.sections section label{width:200px;}
form {
background: -webkit-gradient(linear, bottom, left 175px, from(#CCCCCC), to(#EEEEEE));
background: -moz-linear-gradient(bottom, #CCCCCC, #EEEEEE 175px);

margin:auto;
padding:10px;
position:relative;
width:95%;
font-family: ‘Carrois Gothic’, sans-serif;

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border: 1px solid #999;
border: inset 1px solid #333;

-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
}

fieldset{position:relative;}

input[type=”text”]{
width:95%;
height: 25px;
display:block;

border: 1px solid #999;
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);

-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}

input[type=”button”], input[type=”submit”]{
height: 25px;

border: 1px solid #999;
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);

-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}

textarea {
display:block;
width:95%;
height: 100px;

border: 1px solid #999;
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);

-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}

One thought on “Style Form Fields

  1. kenneth

    After looking over a few of the blog posts on your website, I truly appreciate your way of blogging.
    I saved as a favorite it to my bookmark webpage list and will be checking back
    in the near future. Please check out my web site as well and tell
    me what you think.

Comments are closed.