css制作好看的搜索框
程序员文章站
2022-04-23 19:50:43
...
做网站开发我们肯定少不了一种最基本的功能，就是搜索框，那么搜索框样式也能让一个网站看起来更加美观上档次。现在我们就教大家一种如何把搜索框做的很美观的方法。
效果图：
实现这种效果有两种方法：一是整体处理一个背景，以透明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">
<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(http://files.jb51.net/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" />
<input type="image" src="http://files.jb51.net/demoimg/200912/btn_search_box.gif" width="27" height="24" id="go" alt="Search" title="Search" />
</form>
</div>
</body>
</html>
提示：您可以先修改部分代码再运行
以上就是我们用css实现的搜索框，简单美观，当然大家可以按照以上的方法去制作一个自己喜欢的搜索框。
相关推荐：
以上就是css制作好看的搜索框的详细内容，更多请关注其它相关文章！
推荐阅读
-
Win11搜索框不能用怎么办？Win11搜索框无法加载的解决方法
-
使用 CSS & jQuery 制作一款漂亮的多彩时钟_html/css_WEB-ITnose
-
jquery实现非叠加式的搜索框提示效果_jquery
-
利用CSS3怎么做出不规则图片的切换特效制作
-
android重写webview长按时选择文字然后点击搜索按钮的事件，默认是chrome接受点击事件，现在跳转到360搜索页面_html/css_WEB-ITnose
-
html框架里的站内搜索_html/css_WEB-ITnose
-
怎样制作web版的folder treeview_html/css_WEB-ITnose
-
取值，并赋值到相应的文本框中_html/css_WEB-ITnose
-
专业干货！分享一个特别好用的搜索框必须考虑的五个方面
-
搜索引擎会抓取display:none的内容吗？_html/css_WEB-ITnose