HTML/CSS实现的搜索框代码,Css代码库,德仔网

代码语言

代码分类

【Css】 HTML/CSS实现的搜索框

作者:掬一捧 / 发布于2013/8/5/ 4851

谷歌和百度首页的搜索框都是+


	<html>
	
	<head>
	<title>掬一捧|搜索框的实现</title>
	<meta charset="UTF-8">
	<style type="text/css">
	<!--
	body {
	font-family:'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
	font-size:14px;
	}

	h1 {
	margin-top:0px;
	margin-bottom:8px;
	}

	/* 链接 */
	a {
	text-decoration:none;
	color:#1c00ff;
	}

	a:hover {
	color:#5f00e4;
	}
	fieldset.search {
	padding: 0px;
	border: none;
	width: 232px;
	background:#e0e0e0;
	}

	fieldset.search:hover {
	background: #a8a8a8;
	}
	.search input, .search button {
	border: none;
	float: left;
	}
	.search input.box {
	height: 28px;
	width: 200;
	margin-right: 0px;
	padding-right: 0px;
	background: #e0e0e0;
	margin: 1px;
	}
	.search input.box:focus {
	background: #e8e8e8 ;
	outline: none;
	}
	.search button.btn {
	border: none;
	width: 28px;
	height: 28px;
	margin: 0px auto;
	margin: 1px;
	background: url(http://sandbox.runjs.cn/uploads/rs/339/livk7pl5/search_blue.png) no-repeat top right;
	}
	.search button.btn:hover {
	background: url(http://sandbox.runjs.cn/uploads/rs/339/livk7pl5/search_black.png) no-repeat bottom right;
	}

	/* 文章样式 */
	.article {

	}
	-->
	</style>
	</head>
	<body>
	<div>
	<h2>搜索框</h2>
	<form method="get" id="searchform" action="http://blog.iliyang.cn/">
	<fieldset class="search">
	 <input type="text" class="box" name="s" id="s" class="inputText" placeholder="掬一捧" x-webkit-speech>
	 <button class="btn" title="SEARCH">&nbsp;</button>
	</fieldset>
	</form>
	</div>
	<article class="article">
	</article>
	</body>
	</html>

试试其它关键字

　搜索框　

同语言下

可能有用的

掬一捧贡献的其它代码(1)

.HTML/CSS实现的搜索框