炫意html5
最早CSS3和HTML5移动技术网站之一

用CSS实现可伸缩的搜索框

自从Wordpress自带的主题上放置了一个可以伸缩的搜索框后,这种效果的文本域在新兴的网站上出现的越来越多。实现这种效果其实很简单,鼠标点击下面的搜索图标,你会看到搜索框出现,并慢慢变长。使用简单的几行CSS就能完成它,当然,前提条件是,你要使用支持CSS3的现代浏览器,比如谷歌浏览器,火狐浏览器。

点一下试试看:

下面是实现它的CSS3代码:

.search-field {
border: none;
cursor: pointer;
height: 37px;
margin: 3px 0;
padding: 0 0 0 34px;
position: relative;
transition: width 400ms ease, background 400ms ease;
width: 0;
}
.search-field:focus {
background-color: #fff;
border: 2px solid #c3c0ab;
cursor: text;
outline: 0;
width: 230px;
}

解释一下,搜索框图标使用的是一个背景图,它之所以不影响(不占据)搜索框文本域(input)的位置,是因为给文本域加了一个左边的padding值:padding: 0 0 0 34px;,背景图只出现在padding范围里。文本域的初始长度为0,所以起初只能看到搜索图标。文本域上还加了一个css focus监听事件,当你点击这个文本域时,它获得焦点,这时使用CSS transform把它的长度变大。

很有意思吧,赶快在你的项目里也试一试,让你的不懂技术的客户/老板惊喜一下。

炫意HTML5 » 用CSS实现可伸缩的搜索框

CSS3教程HTML5教程