Css实现文本框提示文字点击清除 离开回来效果

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

<title>美观的CSS搜索框 - Liehuo.net</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="magglass.gif" border="0" hspace="2"/> </td> </tr> </table> </form> <br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行! 

（编辑：云计算网_泰州站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!