的是代码用了免费素材下载 CSS3完成的可伸缩搜寻框成果(无js)

1.界说款式:
[code]
<style>
.demo_search {
display:inline-block;
position:relative;
height:27px;
margin:60px;
}
.demo_search:hover {
-webkit-box-shadow:0 0 3px #999;
-moz-box-shadow:0 0 3px #999
}
.demo_search .demo_sinput {
float:left;
width:130px;
height:19px;
line-height:19px;
padding:3px 5px;
border:#A7A7A7 1px solid;
background:white;
color:#888;
font-size:12px;
-webkit-transition:.3s;
-moz-transition:.3s;
outline: none;
}
.demo_search .demo_sinput:focus {
width:200px;
}
.demo_search .demo_sbtn {
cursor:pointer;
height:27px;
font-size:12px;
float:left;
width:50px;
margin-left:-1px;
background:#eee;
display:inline-block;
padding:0 12px;
vertical-align:middle;
border:#A7A7A7 1px solid;
color:#666;
}
.demo_search .demo_sbtn:hover {
background:#ddd;
}</style>
[/code]
2.html代码:
[code]
<form class="demo_search" action="//www.sharejs.com" method="get">
<input class="demo_sinput" type="text" name="s" />
<input class="demo_sbtn" type="submit" value="搜寻" /></form>
[/code]
本典范榜样仅仅应用了CSS3完成,无需js代码,惋惜的是不克不及正在ie下应用,轻视ie