CSS3收缩搜索

百度谷歌搜狗

加关注：新浪微博腾讯微博

当前位置：首页 > HTML+CSS > CSS3 > 源码

发布时间：2013-09-17 14:52 　来源/作者：藕码网　分类：CSS3

TAG标签：

摘要：CSS3收缩搜索

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<title>实例：简单CSS3搜索</title>
<style>
@charset "utf-8";
body, h1, h2, h3, h4, p, ul, li, ol, dl, dt, dd, input, textarea, figure, form {
	margin:0;
	padding:0
}
body, input, textarea {
	font-size:12px;
	font-family:microsoft yahei
}
body {
	text-align:center;
	color:#33383D;

}
ul, ol {
	list-style:none
}
img {
	border:0
}
button, input {
	line-height:normal;
*overflow:visible
}
input, textarea {
	outline:none
}
a {
	color:#3B8DD1;
	text-decoration:none
}
a:hover {
	color:#8CAC52
}
.demo-header {
	position:relative;
	height:22px;
	background-color:#33363B;
	line-height:22px;
	padding:2px 10px;
	text-align: left;
}
.demo-name {
	color: #ccc;
}
.demo-title {
	display: none;
}
.demo-container {
	clear: both;
	padding:40px 10px 20px;
	text-align:left;
	margin:0 auto;
	line-height: 18px;
}
.demo h2 {
	font-size: 15px;
	padding-bottom: 6px;
	margin-bottom: 20px;
	border-bottom: solid 1px #ddd;
}
</style>
</head>

<body>

<div class="demo-container demo">
  <style type="text/css">

.demo{

	width: 300px;

}

.search:hover {

	-webkit-box-shadow:0 0 3px #999;

	-moz-box-shadow:0 0 3px #999

}

.search .sinput {

	float:left;

	width:150px;

	height:24px;

	line-height:24px;

	padding:4px 5px;

	border:#A7A7A7 1px solid;

	background:white;

	color:#888;

	font-size:12px;

	-webkit-transition:.3s;

	-moz-transition:.3s;

	outline: none;

}

.search .sinput:focus {

	width:220px;

}

.search .sbtn {

	cursor:pointer;

	height:34px;

	font-size:12px;

	float:left;

	width:60px;

	margin-left:-1px;

	background:#eee;

	display:inline-block;

	padding:0 12px;

	vertical-align:middle;

	border:#A7A7A7 1px solid;

	color:#666;

}

.search .sbtn:hover {

	background:#ddd;

}

</style>
  <form class="search" action="/index.php" method="get">
    <input class="sinput" type="text" name="s" />
    <input class="sbtn" type="submit" value="搜索" />
  </form>
</div>
</body>
</html>

素材详情
用户评论
相关文章

CSS3收缩搜索
最新评论

验证码:

菜单/ Menu

热门下载/ HOT