CSS3立体搜索框的实现

2020-01-27 14:19:53

字体：大中小

来源：转载

供稿：网友

CSS3代码编写实现的立体搜索框效果，使用有一张背景图片，但搜索框完全是CSS3代码实现的，没有用JS。我觉得对学习CSS3或许是有帮助的，希望新手参阅哦。

<!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("/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>

上一篇：CSS Div背景透明文字不透明的代码

下一篇：CSS线性渐变垂直和水平渐变linear-gradient