当前位置：首页 > 网页特效 > 表单按钮 >

CSS3立体搜索框的实现

时间：2013-12-26 09:11 来源：互联网作者：源码搜藏收藏推荐

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>纯CSS3漂亮搜索框效果</title>
<style>
html, body{padding: 0;margin: 0;}
html{background: #f8f4e8 url("http://www.codefans.net/jscss/demoimg/201312/bg_tile.jpg") left top repeat;}
body{font: 16px/1.5 Calibri, Helvetica, Arial, sans-serif;}
#wrapper{width: 430px;margin: 200px auto;}
h1{font-family: 'Oswald', Calibri, "Helvetica Neue", Arial, serif;font-size: 54px;font-weight: bold;}
p{color: #545454;margin-top: 50px;}
a{text-decoration: none;color: #000;padding-bottom: 1px;}
a: hover, a: focus{border-bottom: 1px dotted #000;}
#main{width: 400px;height: 50px;background: #f2f2f2;padding: 6px 10px;border: 1px solid #b5b5b5;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;-moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 13px 0 #dfdede;-webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 13px 0 #dfdede;box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 13px 0 #dfdede;}
input[type="text"]{float: left;width: 230px;padding: 15px 5px 5px 5px;margin-top: 5px;margin-left: 3px;border: 1px solid #999999;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;-moz-box-shadow: inset 0 5px 0 #ccc, inset 0 6px 0 #989898, inset 0 13px 0 #dfdede;-webkit-box-shadow: inset 0 5px 0 #ccc, inset 0 6px 0 #989898, inset 0 13px 0 #dfdede;box-shadow: inset 0 5px 0 #ccc, inset 0 6px 0 #989898, inset 0 13px 0 #dfdede;}
input[type="submit"].solid{float: left;cursor: pointer;width: 130px;padding: 8px 6px;margin-left: 20px;background-color: #f8b838;color: rgba(134, 79, 11, 0.8);text-transform: uppercase;font-weight: bold;border: 1px solid #99631d;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7), 0 -1px 0 rgba(64, 38, 5, 0.9);-moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 5px 0 #b8882a, 0 6px 0 #593a11, 0 13px 0 #ccc;-webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 5px 0 #b8882a, 0 6px 0 #593a11, 0 13px 0 #ccc;box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 5px 0 #b8882a, 0 6px 0 #593a11, 0 13px 0 #ccc;-webkit-transition: background 0.2s ease-out;}
input[type="submit"].solid: hover, input[type="submit"].solid: focus{background: #ffd842;-moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.9), inset 0 2px 1px rgba(255, 250, 76, 0.8), 0 5px 0 #d8a031, 0 6px 0 #593a11, 0 13px 0 #ccc;-webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.9), inset 0 2px 1px rgba(255, 250, 76, 0.8), 0 5px 0 #d8a031, 0 6px 0 #593a11, 0 13px 0 #ccc;box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.9), inset 0 2px 1px rgba(255, 250, 76, 0.8), 0 5px 0 #d8a031, 0 6px 0 #593a11, 0 13px 0 #ccc;}
input[type="submit"].solid: active{background: #f6a000;position: relative;top: 5px;border: 1px solid #702d00;-moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 3px 0 #b8882a, 0 4px 0 #593a11, 0 8px 0 #ccc;-webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 3px 0 #b8882a, 0 4px 0 #593a11, 0 8px 0 #ccc;box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 3px 0 #b8882a, 0 4px 0 #593a11, 0 8px 0 #ccc;}
</style>

</head>
<body>
<section id="wrapper">
<h1>CSS3 搜索框 Field</h1>
<div id="main">
	<form>
	<input type="text" id="search" value="请输入……">
	<input type="submit" class="solid" value="Search">
	</form>
</div>
</section>
</body>
</html>

网页特效

CSS3立体搜索框的实现

表单按钮下载排行

最新文章