Membuat search form simpel dan sederhana. Dengan sentuhan border CSS3 terlihat garis melengkung yang elegan :P Search form using border CSS3 berikut sangat simple!
Demo Search Form
<style>
#searchform {
width: 290px;
}
.searchinput {
float: left;
width: 215px;
height: 40px;
padding: 0;
border: 3px solid #A30000;
border-right: none;
font-size: 1.3em;
border-radius: 5px 0 0 5px;
-moz-border-radius: 5px 0 0 5px;
-webkit-border-radius: 5px 0 0 5px;
background: #FFF;
}
.searchsubmit {
float: right;
width: 75px;
height: 40px;
border: 3px solid #A30000;
border-left: none;
padding: 0;
background: #A30000;
font-size: 19.5px;
color: #FFF;
font-family: Georgia, "Times New Roman";
font-style: italic;
border-radius:0 5px 5px 0;
-moz-border-radius:0 5px 5px 0;
-webkit-border-radius:0 5px 5px 0;
}
.searchsubmit:hover {
cursor: pointer;
background: #D60000;
color: #FFF;
}
</style>
<form id="searchform" method="get" action="/search" target="_blank">
<input name="q" class="searchinput" type="text" value=""/>
<input name="searchsubmit" class="searchsubmit" type="submit" value="Search!" />
</form>