首页 > 代码库 > 8款好看的纯CSS3搜索框

8款好看的纯CSS3搜索框

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>8款纯CSS3搜索框</title>

 

<link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<link rel="stylesheet" href="http://www.mamicode.com/style.css">

<style>

* {

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;

}

 

/*搜索框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;

}

</style>

</head>

<body>

<div id="container">

<div class="search bar1">

<form>

<input type="text" placeholder="请输入您要搜索的内容...">

<button type="submit"></button>

</form>

</div>

 

<div class="search bar2">

<form>

<input type="text" placeholder="请输入您要搜索的内容...">

<button type="submit"></button>

</form>

</div>

 

<div class="search bar3">

<form>

<input type="text" placeholder="请输入您要搜索的内容...">

<button type="submit"></button>

</form>

</div>

 

<div class="search bar4">

<form>

<input type="text" placeholder="请输入您要搜索的内容...">

<button type="submit"></button>

</form>

</div>

 

<div class="search bar5">

<form>

<input type="text" placeholder="请输入您要搜索的内容...">

<button type="submit"></button>

</form>

</div>

 

<div class="search bar6">

<form>

<input type="text" placeholder="请输入您要搜索的内容...">

<button type="submit"></button>

</form>

</div>

 

<div class="search bar7">

<form>

<input type="text" placeholder="请输入您要搜索的内容...">

<button type="submit"></button>

</form>

</div>

 

<div class="search bar8">

<form>

<input type="text" placeholder="请输入您要搜索的内容...">

<button type="submit"></button>

</form>

</div>

</div>

</body>

</html>

技术分享

http://www.kgc.cn/?tuin=7133

8款好看的纯CSS3搜索框