利用CSS写精美搜索框

article/2025/8/27 10:17:38

利用html写搜索样式框

在这里插入图片描述

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