效果图：
<!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="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;
}
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;
}
</style>
</head>
<body>
<p id="container">
<p class="search bar1">
<form>
<input type="text" placeholder="请输入您要搜索的内容...">
<button type="submit"></button>
</form>
</p>
<p class="search bar2">
<form>
<input type="text" placeholder="请输入您要搜索的内容...">
<button type="submit"></button>
</form>
</p>
<p class="search bar3">
<form>
<input type="text" placeholder="请输入您要搜索的内容...">
<button type="submit"></button>
</form>
</p>
<p class="search bar4">
<form>
<input type="text" placeholder="请输入您要搜索的内容...">
<button type="submit"></button>
</form>
</p>
<p class="search bar5">
<form>
<input type="text" placeholder="请输入您要搜索的内容...">
<button type="submit"></button>
</form>
</p>
<p class="search bar6">
<form>
<input type="text" placeholder="请输入您要搜索的内容...">
<button type="submit"></button>
</form>
</p>
<p class="search bar7">
<form>
<input type="text" placeholder="请输入您要搜索的内容...">
<button type="submit"></button>
</form>
</p>
<p class="search bar8">
<form>
<input type="text" placeholder="请输入您要搜索的内容...">
<button type="submit"></button>
</form>
</p>
</p>
</body>
</html>
以上就是分享8款css3搜索框的详细内容。