javascript和JQuery焦点图和代码特效大全
当前最流行的开源CMS网站系统大全
当前位置:主页 > WEB前端 > CSS-HTML >

HTML+CSS实现的漂亮搜索框

来源:IT技术网编辑:素还真发布于:2013-08-27人围观CSS实现HTML搜索框

HTML+CSS实现的漂亮搜索框,谷歌和百度首页的搜索框都是<input>+<button>模式的,bing的搜索框感觉要好点儿。简言之,就是将提交按钮放到<input>中,其实这是做不到的,只能伪装。

<html>
 
<head>
<title>IT技术网|搜索框的实现</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://www.173it.cn/">
	<fieldset class="search">
		 <input type="text" class="box" name="s" id="s" class="inputText" placeholder="IT技术网" x-webkit-speech>
		  <button class="btn" title="SEARCH">&nbsp;</button>
	</fieldset>
</form>
</div>
<article class="article">
</article>
</body>
</html>


CSS,实现,HTML,相关的文章
有时间的话来看看IT界的突发事件