CSS3的搜索框聚焦变长效果

一般博客任何页面都带有搜索框搜索框的美化也是整体美化的一部分。此篇文章所讲述的是一种类似于苹果官网的圆角搜索框,鼠标点击聚焦框体时,框体动态拉长,且外发光,在支持HTML5的浏览器中均可实现,经测试Chrome和IE9均可以很好的支持。同时搜索框还可以加入语音输入按钮(IE9不支持)。首先看下图几种颜色风格效果。

searchbar-apple-style

现在以黑色风格为例子,CSS样式代码如下:

#search input[type="text"] { background: url(search-white.png) no-repeat 10px 6px #444; border: 0 none; font: bold 12px Arial,Helvetica,Sans-serif; color: #d7d7d7; width:150px; padding: 6px 15px 6px 35px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset; -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset; -webkit-transition: all 0.7s ease 0s; -moz-transition: all 0.7s ease 0s; -o-transition: all 0.7s ease 0s; transition: all 0.7s ease 0s; } #search input[type="text"]:focus { background: url(search-dark.png) no-repeat 10px 6px #fcfcfc; color: #6a6f75; width: 200px; -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset; -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset; text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); }

 

输入框form表格参数很多,上图是没有搜索按钮的,代码如下:


输入框如果要添加语音输入,可以改成下列代码:


如果要页面加载完毕自动聚焦输入框使阅读者直接输入,请添加autofocus: