8款好看的纯CSS3搜索框（转载）

今天发现个好东西，原文链接：http://www.qdfuns.com/notes/39965/0debdbcd148abc3ad874bba106cc67f4.html

    
    
    

    
    
    
 * {
     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;
 }
 div.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;
 }

 button {
     height: 42px;
     width: 42px;
     cursor: pointer;
     position: absolute;
 }

 
 .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;
 }

 
 .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;
 }

 
 .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;
 }

 
 .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;
 }

 
 .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
 }

 
 .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;
 }

 
 .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;
 }

 
 .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;
 }