php搜索框实例教程,纯CSS3实现搜索框功能实例展示

本文通过实例代码给大家分享8款纯CSS3实现的搜索框功能，代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友参考下吧

效果图：

8款纯CSS3搜索框

* {

box-sizing: border-box;

}

body {

margin: 0;

padding: 0;

background: #494A5F;

font-weight: 500;

font-family: "Microsoft YaHei","宋体","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif, FreeSans, Arimo;

}

#container {

width: 500px;

height: 820px;

margin: 0 auto;

}

p.search {padding: 30px 0;}

form {

position: relative;

width: 300px;

margin: 0 auto;

}

input, button {

border: none;

outline: none;

}

input {

width: 100%;

height: 42px;

padding-left: 13px;

padding-right:46px;

}

button {

height: 42px;

width: 42px;

cursor: pointer;

position: absolute;

}

/*搜索框1*/

.bar1 {background: #A3D0C3;}

.bar1 input {

border: 2px solid #7BA7AB;

border-radius: 5px;

background: #F9F0DA;

color: #9E9C9C;

}

.bar1 button {

top: 0;

right: 0;

background: #7BA7AB;

border-radius: 0 5px 5px 0;

}

.bar1 button:before {

content: "\f002";

font-family: FontAwesome;

font-size: 16px;

color: #F9F0DA;

}

/*搜索框2*/

.bar2 {background: #DABB52;}

.bar2 input, .bar2 button {

border-radius: 3px;

}

.bar2 input {

background: #F9F0DA;

}

.bar2 button {

height: 26px;

width: 26px;

top: 8px;

right: 8px;

background: #F15B42;

}

.bar2 button:before {

content: "\f105";

font-family: FontAwesome;

color: #F9F0DA;

font-size: 20px;

font-weight: bold;

}

/*搜索框3*/

.bar3 {background: #F9F0DA;}

.bar3 form {background: #A3D0C3;}

.bar3 input, .bar3 button {

background: transparent;

}

.bar3 button {

top: 0;

right: 0;

}

.bar3 button:before {

content: "\f002";

font-family: FontAwesome;

font-size: 16px;

color: #F9F0DA;

}

/*搜索框4*/

.bar4 {background: #F15B42;}

.bar4 form {

background: #F9F0DA;

border-bottom: 2px solid #BE290E;

}

.bar4 input, .bar4 button {

background: transparent;

}

.bar4 button {

top: 0;

right: 0;

}

.bar4 button:before {

content: "\f178";

font-family: FontAwesome;

font-size: 20px;

color: #be290e;

}

/*搜索框5*/

.bar5 {background: #683B4D;}

.bar5 input, .bar5 button {

background: transparent;

}

.bar5 input {

border: 2px solid #F9F0DA;

}

.bar5 button {

top: 0;

right: 0;

}

.bar5 button:before {

content: "\f002";

font-family: FontAwesome;

font-size: 16px;

color: #F9F0DA;

}

.bar5 input:focus {

border-color: #311c24

}

/*搜索框6*/

.bar6 {background: #F9F0DA;}

.bar6 input {

border: 2px solid #c5464a;

border-radius: 5px;

background: transparent;

top: 0;

right: 0;

}

.bar6 button {

background: #c5464a;

border-radius: 0 5px 5px 0;

width: 60px;

top: 0;

right: 0;

}

.bar6 button:before {

content: "搜索";

font-size: 13px;

color: #F9F0DA;

}

/*搜索框7*/

.bar7 {background: #7BA7AB;}

.bar7 form {

height: 42px;

}

.bar7 input {

width: 250px;

border-radius: 42px;

border: 2px solid #324B4E;

background: #F9F0DA;

transition: .3s linear;

float: right;

}

.bar7 input:focus {

width: 300px;

}

.bar7 button {

background: none;

top: -2px;

right: 0;

}

.bar7 button:before{

content: "\f002";

font-family: FontAwesome;

color: #324b4e;

}

/*搜索框8*/

.bar8 {background: #B46381;}

.bar8 form {

height: 42px;

}

.bar8 input {

width: 0;

padding: 0 42px 0 15px;

border-bottom: 2px solid transparent;

background: transparent;

transition: .3s linear;

position: absolute;

top: 0;

right: 0;

z-index: 2;

}

.bar8 input:focus {

width: 300px;

z-index: 1;

border-bottom: 2px solid #F9F0DA;

}

.bar8 button {

background: #683B4D;

top: 0;

right: 0;

}

.bar8 button:before {

content: "\f002";

font-family: FontAwesome;

font-size: 16px;

color: #F9F0DA;

}