鼠标点击输入框原有文字自动消失代码,Css代码库,德仔网

代码语言

代码分类

【Css】鼠标点击输入框原有文字自动消失

作者:bacteroid / 发布于2014/7/2/ 1402


	<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="magglass.gif" border="0" hspace="2"/>
	 </td>
	 </tr>
	 </table>
	 </form>

试试其它关键字

　鼠标点击输入框　　原有文字自动消失　

同语言下

可能有用的

bacteroid贡献的其它代码(12)