用css3制作一个搜索框效果

搜索框的形式有多种多样，今天试着用css3做了一个搜索框，

html代码如下：

<form class="form-wrapper">
<input type="text" id="search" placeholder="蓝枫web前端." required>
<input type="submit" value="go" id="submit">
</form>

css代码如下：

body {
background:#eee;
font:12px 'Lucida sans', Arial, Helvetica;
color:#333;
text-align:center;
}
a {
color: #2A679F;
}
.form-wrapper {
width:450px;
padding:8px;
margin:10px auto;
overflow:hidden;
border-width: 1px;
border-style: solid;
border-color: #dedede #bababa #aaa #bababa;
-moz-box-shadow:0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
-webkit-box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
background-color: #f6f6f6;
background-image:-webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#eae8e8));
background-image:-webkit-linear-gradient(top, #f6f6f6, #eae8e8);
background-image:-moz-linear-gradient(top, #f6f6f6, #eae8e8);
background-image: -ms-linear-gradient(top, #f6f6f6, #eae8e8);
background-image: -o-linear-gradient(top, #f6f6f6, #eae8e8);
background-image: linear-gradient(top, #f6f6f6, #eae8e8);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#f6f6f6', endColorstr='#eae8e8'); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#f6f6f6', endColorstr='#eae8e8')"; /* IE8 */
}
.form-wrapper #search {
width:330px;
height:20px;
padding:10px 5px;
float:left;
font:bold 16px 'lucida sans', 'trebuchet MS', 'Tahoma';
border:1px solid #ccc;
-moz-box-shadow:0 1px 1px #ddd inset, 0 1px 0 #fff;
-webkit-box-shadow:0 1px 1px #ddd inset, 0 1px 0 #fff;
box-shadow:0 1px 1px inset, 0 1px 0 #fff;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
}
.form-wrapper #search:focus {
outline:0;
border-color:#aaa;
-moz-box-shadow:0 1px 1px #bbb inset;
-webkit-box-shadow:0 1px 1px #bbb inset;
box-shadow:0 1px 1px #bbb inset;
}
.form-wrapper #search::-webkit-input-placeholder, .form-wrapper #search::-moz-placeholder, .form-wrapper #search::-ms-input-placeholder {
color:#999;
font-weight:normal;
}
.form-wrapper #submit {
float:right;
border:1px solid #00748f;
height:42px;
width:100px;
padding:0;
cursor:pointer;
font:bold 15px Arial, Helvetica, sans-serif;
color:#fafafa;
text-transform:uppercase;
background-color:#0483a0;
background-image:-webkit-gradient(linear, left left bottom, from(#31b2c3), to(#0483a0));
background-image:-webkit-linear-gradient(top, #31b2c3, #0483a0);
background-image:-moz-linear-gradient(top, #31b2c3, #0483a0);
background-image:-o-linear-gradient(top, #31b2c3, #0483a0);
background-image: linear-gradient(top, #31b2c3, #0483a0);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#31b2c3', endColorstr='#0483a0'); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#31b2c3', endColorstr='#0483a0')"; /* IE8 */
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
text-shadow:0 1px 0 rgba(0,0,0,.3);
-moz-box-shadow:0 1px 0 rgba(255,255,255,.3) inset, 0 1px 0 #fff;
-webkit-box-shadow:0 1px 0 rgba(255,255,255,.3) inset, 0 1px #fff;
box-shadow:0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
}
.form-wrapper #submit:hover, .form-wrapper #submit:focus {
background-color:#31b2c3;
background-image: -webkit-gradient(linear, left top, left bottom, from(#0483a0), to(#31b2c3));
background-image: -webkit-linear-gradient(top, #0483a0, #31b2c3);
background-image: -moz-linear-gradient(top, #0483a0, #31b2c3);
background-image: -ms-linear-gradient(top, #0483a0, #31b2c3);
background-image: -o-linear-gradient(top, #0483a0, #31b2c3);
background-image: linear-gradient(top, #0483a0, #31b2c3);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#0483a0', endColorstr='#31b2c3'); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#0483a0', endColorstr='#31b2c3')"; /* IE8 */
}
.form-wrapper #submit:active {
outline: 0;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
}
.form-wrapper #submit::-moz-focus-inner {
border: 0;
}

预览效果：

1，在ie6/7/8中：

2.在firefox. chrome中预览效果：