Красивая CSS3 форма поиска

Вы знали что можно сделать круг с помощью css3 закругленных краев (border-radius) и сделать для него внутреннюю тень с помощью box-shadow? Сечйас попробуем создать форму поиска используя css3 эффекты закругления углов и внутренней тени. Можете посмотреть демо уже здесь. Но сперва я покажу как отдельно делать круг и внутреннюю тень.

Круг

Круг получается при придание очень большого значения скругленности углов. В следующем примере закругленность углов равна 100px что достаточно так как сам класс имеет размер всего 100х100

.circle {
	width: 100px;
	height: 100px;
	-moz-border-radius: 100px;
	-webkit-border-radius: 100px;
}

.inset {
   -moz-box-shadow: inset 0 3px 8px rgba(0,0,0,.4);
   -webkit-box-shadow: inset 0 3px 8px rgba(0,0,0,.4);
   box-shadow: inset 0 3px 8px rgba(0,0,0,.24);
}

Форма поиска

Ну а теперь попробуем создать красивую форму поиска также будем использовать такую CSS3 примочку как градиент. Для начала сделаем на Html простенькую форму:

<form class="searchform">
	<input class="searchfield" type="text" value="Искать..." onfocus="if (this.value == 'Искать...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Искать...';}" />
	<input class="searchbutton" type="button" value="Go" />
</form>

Теперь можем писать для формы стили:

.searchform {
	display: inline-block;
	zoom: 1; /* ie7 hack for display:inline-block */
	*display: inline;
	border: solid 1px #009980;
	padding: 3px 5px;
	-webkit-border-radius: 2em;
	-moz-border-radius: 2em;
	border-radius: 2em;
	-webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1);
	-moz-box-shadow: 0 1px 0px rgba(0,0,0,.1);
	box-shadow: 0 1px 0px rgba(0,0,0,.1);
	background: #f1f1f1;
	background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
	background: -moz-linear-gradient(top,  #fff,  #ededed);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie7 */
	-ms-filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie8 */
}
.searchform input {
	font: normal 12px/100% Arial, Helvetica, sans-serif;
}
.searchform .searchfield {
	background: #fff;
	padding: 6px 6px 6px 8px;
	width: 202px;
	border: solid 1px #009980;
	outline: none;
	-webkit-border-radius: 2em;
	-moz-border-radius: 2em;
	border-radius: 2em;
	-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
	-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
	box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
}
.searchform .searchbutton {
	color: #fff;
	border: solid 1px #009933;
	font-size: 11px;
	height: 27px;
	width: 27px;
	text-shadow: 0 1px 1px rgba(0,0,0,.6);
	-webkit-border-radius: 2em;
	-moz-border-radius: 2em;
	border-radius: 2em;
	background: #5f5f5f;
	background: -webkit-gradient(linear, left top, left bottom, from(#00CC00), to(#66CC00));
	background: -moz-linear-gradient(top,  #00CC00,  #66CC00);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#00CC00', endColorstr='#66CC00'); /* ie7 */
	-ms-filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#00CC00', endColorstr='#66CC00'); /* ie8 */
}