CSS 漂亮搜索框美化代码

发布时间：2009-12-03 20:19:33 作者：佚名

我要评论

搜索框是我们经常见到的网站功能，它的美观直接影响着网站舒适度，一般我们都会下功夫美化搜索框。

效果图：

实现这种效果有两种方法：一是整体处理一个背景，以透明gif图的方式定位到搜索框，或者切分开，这种方法加载快，而且灵活性更高。
文中用到的图片

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CSS美化的漂亮搜索框</title> <style type="text/css"> body{ font: normal 100% 'Arial','Helvetica','Verdana',sans-serif; color: #333; } p { padding: 12px 0; margin: 0; font-size: .8em; line-height: 1.5; } form { margin: 0; } #search_box { width: 201px; height: 31px; background: url(//img.jbzj.com/demoimg/200912/bg_search_box.gif); } #search_box #s { float: left; padding: 0; margin: 6px 0 0 6px; border: 0; width: 159px; background: none; font-size: .8em; } #search_box #go { float: right; margin: 3px 4px 0 0; } </style> </head> <body> <div id="search_box"> <form id="search_form" method="post" action="#"> <input type="text" id="s" value="Search" class="swap_value" /> <input type="image" src="//img.jbzj.com/demoimg/200912/btn_search_box.gif" width="27" height="24" id="go" alt="Search" title="Search" /> </form> </div> </body> </html>

提示：您可以先修改部分代码再运行

Tag：css 搜索框美化

HTML实现移动端固定悬浮半透明搜索框
这篇文章主要介绍了HTML实现移动端固定悬浮半透明搜索框的相关资料,需要的朋友可以参考下
2017-10-17
超酷html5+CSS3绿色发光搜索框表单提交
一款html5+css3实现的超酷绿色发光搜索表单
2014-04-22
用html5实现语音搜索框的方法
作为一个专业的淘宝控，不知道从什么时候开始发现淘宝上居然还有语音搜索，好吧，因为好奇心作祟还是想一探究竟，不过我想仔细一点的人，都会发现在只有在webkit内核的浏览
2014-03-18
分享8款纯CSS3实现的搜索框功能
本文通过实例代码给大家分享8款纯CSS3实现的搜索框功能，代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友参考下吧
2017-09-14
CSS3实现的可伸缩搜索框效果(无js)
本范例仅仅使用了CSS3实现,无需js代码,可惜的是不能在ie下使用
2013-05-02
css 教学实例漂亮的搜索框
今天让学生实现一个搜索框的效果，死活做不出来.
2009-10-13
基于html css实现带搜索图标的搜索框功能
这篇文章主要介绍了基于html css实现带搜索图标的搜索框功能,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-10-09

CSS 漂亮搜索框美化代码

相关文章

最新评论

文章分类

大家感兴趣的内容

最近更新的内容