With the new CSS3 properties you can style simple form elements, so that they looks more handsome. To give an example, I will explain the steps to create a search form as you’ll find on the startpage of www.circlecount.com

Let’s start with the html part. At first you need a form element which serves like a frame for the search field and the search button. The first input tag is the search field (type text), the second one the button (type submit).

<form name="form" action="action.php" method="post" class="searchbox">
  <input type="text" name="search" id="search" value="" />
  <input type="submit" value='Add / Search' class='submitsearch buttonlong' />
</form>

Now we declare how the form tag looks like with the help of the class searchbox. Following you see four background-image properties for the linear color gradient. Unfortunatelly each browser type need his own property implementation for some CSS3 features. Therefore the linear gradient starts with a unique tag (-moz, -webkit, -o, -ms) for each browser.
moz = Mozilla browser like Firefox
webkit = Chrome, Safari
o = Opera
ms = Microsoft IE (but only IE 10 understand this tag)

.searchbox {
background: #ccc;
background-image: -moz-linear-gradient(#f3f3f1, #cccccc);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #cccccc),color-stop(1, #f3f3f3));
background-image: -o-linear-gradient(#f3f3f1, #cccccc);
background-image: -ms-linear-gradient(#f3f3f1, #cccccc);
-moz-border-radius: 35px;
border-radius: 35px;
border-width: 1px;
border-style: solid;
border-color: #ccc #bbb #aaa;
width: 600px;
padding: 4px;
margin: 10px auto 10px;
overflow: hidden; /* Clear floats */
}

In addition we set up the border radius, border width and style (solid). The form should be 600px long (change it for your own). The margin: 10px auto will center the form in the middle of the parent element.
Just a short note: The property background: #ccc; serves as a fallback color for older browsers (i.e. IE8 and all pre versions, which don’t understand the CSS3 linear gradient property).

Let’s go to the input field. The first six properties define how the input field in general looks. Due to the rounded corners for the above mentioned form, the left side of the search input field should have full rounded corners too. Therfore we are using 50px for the left top and bottom corner ( border-radius: 50px 3px 3px 50px;). The 3px values define the right top and bottom corner. In addition we set up a inner box shadow.

#search {
padding: 5px 8px;
height: 18px;
width: 397px;
border: 1px solid #bbb;
font: normal 14px Arial, Helvetica;
background: #f8f8f8;
-moz-border-radius: 50px 3px 3px 50px;
-webkit-border-radius: 50px 3px 3px 50px;
border-radius: 50px 3px 3px 50px;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
}

But please note: The border-radius property is supported in IE9+, Firefox 4+, Chrome, Safari 5+, and Opera. This means, users with older browsers may not see the rounded corners.

For the submit button I’m using the same techniques. But now we want full rounded corners at the right side of the button. Some further explanations to the different webkit gradient tag (for Chrome, Safari). For all other browsers you only need to define the start and end colors, from top to down. But for webkit browsers you have the possibility to define each corner and color stops. But keep in mind, that i.e Firefox can’t show a gradient from the upper left to the lower right corner. Maybe future browser versions will support the full CSS3 specification.

.submitsearch {
background: #4797CF;
background-image: -moz-linear-gradient(#53aef0, #3459A7);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #3459A7),color-stop(1, #53aef0)); 
background-image: -o-linear-gradient(#53aef0, #3459A7);
background-image: -ms-linear-gradient(#53aef0, #3459A7);
-moz-border-radius: 3px 50px 50px 3px;
-webkit-border-radius: 3px 50px 50px 3px;
border-radius: 3px 50px 50px 3px;
border-width: 1px;
border-style: solid;
border-color: #4693CB;
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;                
height: 30px;
margin: 0 0 0 4px;
padding: 0;
width: 180px;
cursor: pointer;
font: bold 14px Arial, Helvetica;
color: #fff;
}

If for your purposes the form is too long, just change the width property in the #search, .submitsearch and .searchbox classes respectively.

Now to the orientation of the both input tags. They’re floated to the left side (in one line). But if you float an element, you should clear it afterwards. That will be indirectly done by the overflow property of the above mentioned searchbox class.

#search, .submitsearch {
float: left;
}

Finally we change the submit button colors by mouse hovering.

.submitsearch:hover {
background: #1a84cf;
background-image: -moz-linear-gradient(#53aef0, #2a4783);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #53aef0),color-stop(1, #2a4783));
background-image: -o-linear-gradient(#53aef0, #2a4783);
background-image: -ms-linear-gradient(#53aef0, #2a4783);
}       

Last but not least, you can see this search form live at www.circlecount.com.
If a small error has cript in or if you have any question, don’t hasitate to contact me!