分享8款纯CSS3实现的搜索框功能
网站建设 2023-01-28 21:38www.1681989.com免费网站
效果图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, itial-scale=1.0">
<title>8款纯CSS3搜索框</title>
<lk href="http://cdn.bootcss./font-awesome/4.7.0/css/font-awesome.m.css" rel="stylesheet">
<lk rel="stylesheet" href="style.css">
<style>
{
box-sizg: border-box;
}
body {
marg: 0;
paddg: 0;
background: #494A5F;
font-weight: 500;
font-family: "Microsoft YaHei","宋体","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif, FreeSans, Arimo;
}
#contaer {
width: 500px;
height: 820px;
marg: 0 auto;
}
div.search {paddg: 30px 0;}
form {
position: relative;
width: 300px;
marg: 0 auto;
}
put, button {
border: none;
outle: none;
}
put {
width: 100%;
height: 42px;
paddg-left: 13px;
paddg-right:46px;
}
button {
height: 42px;
width: 42px;
cursor: poter;
position: absolute;
}
/搜索框1/
.bar1 {background: #A3D0C3;}
.bar1 put {
border: 2px solid #7BA7AB;
border-radius: 5px;
background: #F9F0DA;
color: #9E9C9C;
}
.bar1 button {
: 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 put, .bar2 button {
border-radius: 3px;
}
.bar2 put {
background: #F9F0DA;
}
.bar2 button {
height: 26px;
width: 26px;
: 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 put, .bar3 button {
background: transparent;
}
.bar3 button {
: 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 put, .bar4 button {
background: transparent;
}
.bar4 button {
: 0;
right: 0;
}
.bar4 button:before {
content: "\f178";
font-family: FontAwesome;
font-size: 20px;
color: #be290e;
}
/搜索框5/
.bar5 {background: #683B4D;}
.bar5 put, .bar5 button {
background: transparent;
}
.bar5 put {
border: 2px solid #F9F0DA;
}
.bar5 button {
: 0;
right: 0;
}
.bar5 button:before {
content: "\f002";
font-family: FontAwesome;
font-size: 16px;
color: #F9F0DA;
}
.bar5 put:focus {
border-color: #311c24
}
/搜索框6/
.bar6 {background: #F9F0DA;}
.bar6 put {
border: 2px solid #c5464a;
border-radius: 5px;
background: transparent;
: 0;
right: 0;
}
.bar6 button {
background: #c5464a;
border-radius: 0 5px 5px 0;
width: 60px;
: 0;
right: 0;
}
.bar6 button:before {
content: "搜索";
font-size: 13px;
color: #F9F0DA;
}
/搜索框7/
.bar7 {background: #7BA7AB;}
.bar7 form {
height: 42px;
}
.bar7 put {
width: 250px;
border-radius: 42px;
border: 2px solid #324B4E;
background: #F9F0DA;
transition: .3s lear;
float: right;
}
.bar7 put:focus {
width: 300px;
}
.bar7 button {
background: none;
: -2px;
right: 0;
}
.bar7 button:before{
content: "\f002";
font-family: FontAwesome;
color: #324b4e;
}
/搜索框8/
.bar8 {background: #B46381;}
.bar8 form {
height: 42px;
}
.bar8 put {
width: 0;
paddg: 0 42px 0 15px;
border-bottom: 2px solid transparent;
background: transparent;
transition: .3s lear;
position: absolute;
: 0;
right: 0;
z-dex: 2;
}
.bar8 put:focus {
width: 300px;
z-dex: 1;
border-bottom: 2px solid #F9F0DA;
}
.bar8 button {
background: #683B4D;
: 0;
right: 0;
}
.bar8 button:before {
content: "\f002";
font-family: FontAwesome;
font-size: 16px;
color: #F9F0DA;
}
</style>
</head>
<body>
<div id="contaer">
<div class="search bar1">
<form>
<put type="text" placeholder="请输入您要搜索的内容...">
<button type="submit"></button>
</form>
</div>
<div class="search bar2">
<form>
<put type="text" placeholder="请输入您要搜索的内容...">
<button type="submit"></button>
</form>
</div>
<div class="search bar3">
<form>
<put type="text" placeholder="请输入您要搜索的内容...">
<button type="submit"></button>
</form>
</div>
<div class="search bar4">
<form>
<put type="text" placeholder="请输入您要搜索的内容...">
<button type="submit"></button>
</form>
</div>
<div class="search bar5">
<form>
<put type="text" placeholder="请输入您要搜索的内容...">
<button type="submit"></button>
</form>
</div>
<div class="search bar6">
<form>
<put type="text" placeholder="请输入您要搜索的内容...">
<button type="submit"></button>
</form>
</div>
<div class="search bar7">
<form>
<put type="text" placeholder="请输入您要搜索的内容...">
<button type="submit"></button>
</form>
</div>
<div class="search bar8">
<form>
<put type="text" placeholder="请输入您要搜索的内容...">
<button type="submit"></button>
</form>
</div>
</div>
</body>
</html>
以上所述是长沙网络推广给大家介绍的 分享8款纯CSS3实现的搜索框功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，长沙网络推广会及时回复大家的。在此也非常感谢大家对狼蚁SEO网站的支持！