CSS实现的搜索框点击后提示消失非常美观

时间：2013-08-30 08:59 来源：互联网作者：源码搜藏浏览：次收藏挑错推荐打印

<title>美观的CSS搜索框</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>

运行代码保存代码复制代码提示：您可以先修改部分代码再运行，保存代码功能在Firefox下无效。

一个美观的CSS网页搜索框，它的点击后提示消失的功能也很不错，鼠标只要点击一下搜索框，提示文字就不见了，鼠标移开后又回来了。没其它的什么东西，主要是搜索框，觉得挺美观大方，于是拿出来奉献给大家，添加到你的网页里肯定效果不错。 CSS实现的搜索框点击后提示消失非常美观由源码搜藏网整理,转载请注明出处http://www.codesocang.com/texiao/csstx/5521.html

CSS实现的搜索框点击后提示消失非常美观

网页特效