The Form - CSS

Styling your form

There are a variety of styles that you can add to the form elements. We are going to give ours rounded corners and have the box change color on focus (the box will change color when the user clicks inside the input element ).

input element without styles


First state the color of the background and border:
input {
background-color: #fff;
border-style: solid;
border-color: #777c89;
border-width: 1px;
}

Next add a border-radius (you still need to add the code for the various browsers)

input {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
}

Next add the focus

input: focus{
border-color: #b74061;
}

Next you need to make sure the outline=0px because in some browsers (Chrome is one) focus still creates a square box even though you have rounded corners

input{
outline: 0px;
}

All Css Properties Combined

input {
width: 80%;
font-style: italic;
font-size: .8em;
padding: .5em;
background-color: #fff;
border-style: solid;
border-color: #777c89;
border-width: 1px;
outline: 0px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
}