一个美观的CSS网页搜索框，没其它的什么东西，主要是搜索框，觉得挺美观大方，于是拿出来奉献给大家，添加到你的网页里肯定效果不错。它的点击后提示消失的功能也很不错，鼠标只要点击一下搜索框，提示文字就不见了，鼠标移开后又回来了。

点击(此处)折叠或打开

<title>水滴角测试仪</title>
<style type=\"text/css\">
.searchinput{
border-right-width: 0px;
padding-left: 3px;
width: 168px;
font-family: arial;
float: left;
border-top-width: 0px;
border-bottom-width: 0px;
color: #636365;
margin-left: 4px;
font-size: 8pt;
vertical-align: middle;
border-left-width: 0px;
margin-right: 3px;
}
.tab_search{
border-bottom: #cccccc 1px solid;
border-left: #cccccc 1px solid;
height: 25px;
border-top: #cccccc 1px solid;
border-right: #cccccc 1px solid;
}
.searchaction{
width: 21px;
float: left;
height: 17px;
}
</style>
<form action=\"#\" name=\"search\">
<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" class=\"tab_search\">
<tr>
<td>
<input type=\"text\" name=\"q\" title=\"Search\" class=\"searchinput\" id=\"searchinput\" onkeydown=\"if (event.keyCode==13) {}\" onblur=\"if(this.value==\'\')value=\'- Search Products -\';\" onfocus=\"if(this.value==\'- Search Products -\')value=\'\';\" value=\"- Search Products -\" size=\"10\"/>
</td>
<td>
<input type=\"image\" width=\"21\" height=\"17\" class=\"searchaction\" onclick=\"if(document.forms[\'search\'].searchinput.value==\'- Search Products -\')document.forms[\'search\'].searchinput.value=\'\';\" alt=\"Search\" src=\"http://www.codefans.net/jscss/demoimg/201008/magglass.gif\" border=\"0\" hspace=\"2\"/>
</td>
</tr>
</table>
</form>

ITPub博客

美观的CSS搜索框，点击后提示消失