CSS3实现的可伸缩搜索框效果(无js) |
| 2021-01-21 22:05:13 35资源网(www.35d.net) |
| js |
下载本资源原文网址：http://www.daima.org/js/js13395.html 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 |
|
|
|
|
|
资源大全_资源下载网站：www.35d.net 本站资源仅限研究学习使用，如需商用请联系版权方， 本站事务联系QQ：939804642
|
|
