CSS3教程

当前位置: HTML5技术网 > CSS3教程 > Pure CSS3 Search Form

Pure CSS3 Search Form

利用制作Search Box的效果,一共制作了四个不同的搜索表单的效果,希望大家喜欢。

HTML CODE

<formid="formWrapper">
<divclass="formFiledclearfix">
<inputtype="text"required=""placeholder="SearchforCSS3,HTML5,jQuery..."class="search">
<inputtype="submit"class="btnsubmit"value="go">
</div>
</form>
<formaction=""method="post"id="searchForm"class="form">
<divclass="formFiledclearfix">
<inputtype="text"class="inputTextsearch"placeholder="Enteryourkeyword,please!"name="search"/>
<inputtype="submit"class="btnsubmit"value="Search"/>
</div>
</form>
<formaction=""method="post"id="searchBox"class="form">
<divclass="formFiledclearfix">
<inputtype="text"id="search"class="inputTextsearch"placeholder="Search..."name="search"/>
<inputtype="submit"class="btnsubmit"value="Search"/>
</div>
</form>
<formclass="formclearfix"name="signup-form"method="post"action="#"id="signup-form">
<inputtype="text"class="field"id="mce-EMAIL"name="EMAIL"placeholder="Enteryouremailaddress…">
<inputtype="submit"class="btn"id="mc-embedded-subscribe"name="subscribe"value="SignUp">
</form>

CSS CODE

#formWrapper {
width: 450px;
padding: 8px;
margin: 30px auto;
overflow: hidden;
border-width: 1px;
border-style: solid;
border-color: #dedede #bababa #aaa #bababa;
box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
border-radius: 10px;
background-color: #f6f6f6;
background-image: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#eae8e8));
background-image: -webkit-linear-gradient(top, #f6f6f6, #eae8e8);
background-image: -moz-linear-gradient(top, #f6f6f6, #eae8e8);
background-image: -ms-linear-gradient(top, #f6f6f6, #eae8e8);
background-image: -o-linear-gradient(top, #f6f6f6, #eae8e8);
background-image: linear-gradient(top, #f6f6f6, #eae8e8);
}
#formWrapper .search {
width: 330px;
height: 20px;
padding: 10px 5px;
float: left;
font: bold 16px 'lucida sans', 'trebuchet MS', 'Tahoma';
border: 1px solid #ccc;
box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;
border-radius: 3px;
}
#formWrapper .search:focus {
outline: 0;
border-color: #aaa;
box-shadow: 0 1px 1px #bbb inset;
}
#formWrapper .search::-webkit-input-placeholder,
#formWrapper .search:-moz-placeholder,
#formWrapper .search:-ms-input-placeholder {
color: #999;
font-weight: normal;
}

#formWrapper .btn {
float: right;
border: 1px solid #00748f;
height: 42px;
width: 100px;
padding: 0;
cursor: pointer;
font: bold 15px Arial, Helvetica;
color: #fafafa;
text-transform: uppercase;
background-color: #0483a0;
background-image: -webkit-gradient(linear, left top, left bottom, from(#31b2c3), to(#0483a0));
background-image: -webkit-linear-gradient(top, #31b2c3, #0483a0);
background-image: -moz-linear-gradient(top, #31b2c3, #0483a0);
background-image: -ms-linear-gradient(top, #31b2c3, #0483a0);
background-image: -o-linear-gradient(top, #31b2c3, #0483a0);
background-image: linear-gradient(top, #31b2c3, #0483a0);
border-radius: 3px;
text-shadow: 0 1px 0 rgba(0, 0 ,0, .3);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
}
#formWrapper .btn:hover,
#formWrapper .btn:focus {
background-color: #31b2c3;
background-image: -webkit-gradient(linear, left top, left bottom, from(#0483a0), to(#31b2c3));
background-image: -webkit-linear-gradient(top, #0483a0, #31b2c3);
background-image: -moz-linear-gradient(top, #0483a0, #31b2c3);
background-image: -ms-linear-gradient(top, #0483a0, #31b2c3);
background-image: -o-linear-gradient(top, #0483a0, #31b2c3);
background-image: linear-gradient(top, #0483a0, #31b2c3);
}
#formWrapper .btn:active {
outline: 0;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
}
/*demo2*/

#searchForm {
width: 420px;
margin: 30px auto;
background-color:#f2f3f1;
background-image:-webkit-gradient(linear,left top,left bottom,from(#fafafa),to(#f2f3f1));
background-image:-webkit-linear-gradient(top,#fafafa,#f2f3f1);
background-image:-moz-linear-gradient(top,#fafafa,#f2f3f1);
background-image:-ms-linear-gradient(top,#fafafa,#f2f3f1);
background-image:-o-linear-gradient(top,#fafafa,#f2f3f1);
background-image:linear-gradient(top,#fafafa,#f2f3f1);
box-shadow:0 1px 2px rgba(0,0,0,.4);
border-radius:3px;
position:relative;
padding:12px;
}
#searchForm:before{
content:'';
background:rgba(0,0,0,.07);
border-radius:10px;
box-shadow:0 1px 1px rgba(0,0,0,.4) inset,0 1px 0 rgba(255,255,255,.7);
position:absolute;
top:-10px;
bottom:-10px;
left:-10px;
right:-10px;
z-index:-1;
}

#searchForm .search{
padding:10px;
width:285px;
float:left;
border:1px solid #ccc;
color:#bbb;
background:#fafafa;
border-radius:3px;
box-shadow:0 1px 0 rgba(255,255,255,.9);
-webkit-transition:all 0.28s ease-in 0s;
-moz-transition:all 0.28s ease-in 0s;
-o-transition:all 0.28s ease-in 0s;
-ms-transition:all 0.28s ease-in 0s;
transition:all 0.28s ease-in 0s;
font:bold 14px Arial,Helvetica;
margin: 0;
vertical-align: baseline;
line-height: normal;
}
#searchForm .search:focus{
background:#fff;
box-shadow:0 2px 1px rgba(0,0,0,.4) inset;
outline:0;
color:#444;
}


#searchForm .btn{
padding:9px 10px;
width:100px;
float:right;
border:1px solid #7e1515;
color:#fff;
text-transform:uppercase;
text-shadow:0 -1px 0 rgba(0,0,0,.4);
font-weight:bold;
font-size:14px;
background-color:#d14545;
background-image:-webkit-gradient(linear,left top,left bottom,from(#e97171),to(#d14545));
background-image:-webkit-linear-gradient(top,#e97171,#d14545);
background-image:-moz-linear-gradient(top,#e97171,#d14545);
background-image:-ms-linear-gradient(top,#e97171,#d14545);
background-image:-o-linear-gradient(top,#e97171,#d14545);
background-image:linear-gradient(top,#e97171,#d14545);
box-shadow:0 1px 0 rgba(255,255,255,.4) inset;
border-radius:3px;
-webkit-transition:all 0.28s ease-in 0s;
-moz-transition:all 0.28s ease-in 0s;
-o-transition:all 0.28s ease-in 0s;
-ms-transition:all 0.28s ease-in 0s;
transition:all 0.28s ease-in 0s;
vertical-align: baseline;
line-height: normal;
margin-left: 12px;
}
#searchForm .btn:hover,
#searchForm .btn:focus{
background-color:#e97171;
background-image:-webkit-gradient(linear,left top,left bottom,from(#d14545),to(#e97171));
background-image:-webkit-linear-gradient(top,#d14545,#e97171);
background-image:-moz-linear-gradient(top,#d14545,#e97171);
background-image:-ms-linear-gradient(top,#d14545,#e97171);
background-image:-o-linear-gradient(top,#d14545,#e97171);
background-image:linear-gradient(top,#d14545,#e97171);
}
#searchForm .btn:active{
outline:none;
box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;
}
/*demo3*/
#searchBox{
width: 450px;
margin: 30px auto;
background-color: #eaf8fc;
background-image: -moz-linear-gradient(#fff, #d4e8ec);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #d4e8ec),color-stop(1, #fff));
background-image: -webkit-linear-gradient(#fff, #d4e8ec);
background-image: -o-linear-gradient(#fff, #d4e8ec);
background-image: -ms-linear-gradient(#fff, #d4e8ec);
background-image: linear-gradient(#fff, #d4e8ec);
border-radius: 35px;
border: solid 1px #c4d9df;
border-color: #c4d9df #a4c3ca #83afb7;
padding: 10px;
}

#searchBox .search {
padding: 5px 9px;
height: 23px;
width: 325px;
border: 1px solid #a4c3ca;
font: normal 13px 'trebuchet MS', arial, helvetica;
background: #f1f1f1;
float: left;
border-radius: 50px 3px 3px 50px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
-webkit-transition:all 0.28s ease-in 0s;
-moz-transition:all 0.28s ease-in 0s;
-o-transition:all 0.28s ease-in 0s;
-ms-transition:all 0.28s ease-in 0s;
transition:all 0.28s ease-in 0s;
}

#searchBox .search:focus {
background-color: #FFFFFF;
border-color: #8BADB4;
outline: 0 none;
}

#searchBox .btn {
float:left;
background-color: #6cbb6b;
background-image: -moz-linear-gradient(#95d788, #6cbb6b);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #6cbb6b),color-stop(1, #95d788));
background-image: -webkit-linear-gradient(#95d788, #6cbb6b);
background-image: -o-linear-gradient(#95d788, #6cbb6b);
background-image: -ms-linear-gradient(#95d788, #6cbb6b);
background-image: linear-gradient(#95d788, #6cbb6b);
border-radius: 3px 50px 50px 3px;
border: 1px solid #7eba7c;
border-color: #7eba7c #578e57 #447d43;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
height: 35px;
margin: 0 0 0 10px;
padding: 0;
width: 90px;
cursor: pointer;
font: bold 14px Arial, Helvetica;
color: #23441e;
text-shadow: 0 1px 0 rgba(255,255,255,0.5);
-webkit-transition:all 0.28s ease-in 0s;
-moz-transition:all 0.28s ease-in 0s;
-o-transition:all 0.28s ease-in 0s;
-ms-transition:all 0.28s ease-in 0s;
transition:all 0.28s ease-in 0s;
}
#searchBox .btn:hover {
background-color: #95d788;
background-image: -moz-linear-gradient(#6cbb6b, #95d788);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #95d788),color-stop(1, #6cbb6b));
background-image: -webkit-linear-gradient(#6cbb6b, #95d788);
background-image: -o-linear-gradient(#6cbb6b, #95d788);
background-image: -ms-linear-gradient(#6cbb6b, #95d788);
background-image: linear-gradient(#6cbb6b, #95d788);
}

#searchBox .btn:active{
background-color: #95d788;
outline: none 0;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
}
/*demo4*/
#signup-form {
width:450px;
margin: 20px auto;
padding: 18px;
background-color: #db4648;
border-radius: 8px;
box-shadow: 0 8px 0 #96293B;
}
#signup-form .field {
float: left;
padding: 15px 14px 15px 14px;
width: 280px;
font: 17px/17px 'Abel', Helvetica, serif;
color: #c2c2c2;
letter-spacing: .2em;
background-color: #fff;
border-top: 4px solid #c2c2c2;
border-right: 0;
border-bottom: 0;
border-left: 0;
border-radius: 4px;
margin-top: 0;
}
#signup-form .field:focus {
color: black;
}
#signup-form input.btn {
cursor: pointer;
float: left;
margin-left: 15px;
padding: 14px 14px 11px;
font: normal 19px/20px 'Abel', Helvetica, serif;
color: #fff;
letter-spacing: .2em;
text-transform: uppercase;
background-color: #6f2b41;
border-top: 0;
border-right: 0;
border-left: 0;
border-bottom: 0;
border-radius: 4px;
box-shadow: 0 5px 0 #54253e;
height: 52px;
}
#signup-form input:active.btn {
background-color: #6f2b41;
border-bottom-color: #6f2b41;
box-shadow: 0 1px 0 #3c1a2c;
margin-top: 4px;
}

在线演示:http://www.w3cplus.com/demo/css3/searchForm/index.html
下载:searchForm.zip

【Pure CSS3 Search Form】相关文章

1. Pure CSS3 Search Form

2. Pure CSS3 Circle Menu

3. Pure CSS3 Create Luminous Button

4. Pure CSS3 Create Pagination

5. Pure CSS3 3D Buttons

6. Pure CSS3 Accordion Slider

7. srcset属性获chrome 34支持,大赞!

8. Xcode 6.3 发布,支持 Force Touch 和 Swift 1.2

9. SuperCurve

10. Form Follows Function:绚丽HTML5互动体验网站

本文来源:https://www.51html5.com/a887.html

点击展开全部

﹝Pure CSS3 Search Form﹞相关内容

「Pure CSS3 Search Form」相关专题

其它栏目

也许您还喜欢