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

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

点击(此处)折叠或打开

1. <title>水滴角测试仪</title>
   
2. <style type=\"text/css\">
   
3. .searchinput{
   
4.     border-right-width: 0px;
   
5.     padding-left: 3px;
   
6.     width: 168px;
   
7.     font-family: arial;
   
8.     float: left;
   
9.     border-top-width: 0px;
   
10.     border-bottom-width: 0px;
    
11.     color: #636365;
    
12.     margin-left: 4px;
    
13.     font-size: 8pt;
    
14.     vertical-align: middle;
    
15.     border-left-width: 0px;
    
16.     margin-right: 3px;
    
17. }
    
18. .tab_search{
    
19.     border-bottom: #cccccc 1px solid;
    
20.     border-left: #cccccc 1px solid;
    
21.     height: 25px;
    
22.     border-top: #cccccc 1px solid;
    
23.     border-right: #cccccc 1px solid;
    
24. 
    
25. }
    
26. .searchaction{
    
27.     width: 21px;
    
28.     float: left;
    
29.     height: 17px;
    
30. }
    
31. </style>
    
32. <form action=\"#\" name=\"search\">
    
33. <table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" class=\"tab_search\">
    
34.     <tr>
    
35.         <td>
    
36.             <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\"/>
    
37.         </td>
    
38.         <td>
    
39.             <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\"/>
    
40.         </td>
    
41.     </tr>
    
42. </table>
    
43. </form>

来自 “ ITPUB博客 ” ，链接：http://blog.itpub.net/29737856/viewspace-1226026/，如需转载，请注明出处，否则将追究法律责任。

转载于:http://blog.itpub.net/29737856/viewspace-1226026/