好看css搜索框样式_分享8款纯CSS搜索框
最简单实⽤的CSS3搜索框样式，纯CSS效果⽆需任何javascript，其中部分搜索框在点击的时候有动画特效，搜索框的应⽤也是⽐较普通的，效果如下：
代码如下：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>8款纯CSS3搜索框</title>
7
8    <link href="cdn.bootcss/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
9    <link rel="stylesheet" href="style.css">
10    <style>
11        * {
12            box-sizing: border-box;
13        }
14
15        body {
16            margin: 0;
17            padding: 0;
18            background: #494A5F;
19            font-weight: 500;
20            font-family: "Microsoft YaHei","宋体","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif, FreeSans, Arimo;
21        }
26            margin: 0 auto;
27        }
28        div.search {padding: 30px 0;}
29
30        form {
31            position: relative;
32            width: 300px;
borderbox33            margin: 0 auto;
34        }
35
36        input, button {
37            border: none;
38            outline: none;
39        }
40
41        input {
42            width: 100%;
43            height: 42px;
44            padding-left: 13px;
45        }
46
47        button {
48            height: 42px;
49            width: 42px;
50            cursor: pointer;
51            position: absolute;
52        }
53
54/*搜索框1*/
55        .bar1 {background: #A3D0C3;}
56        .bar1 input {
57            border: 2px solid #7BA7AB;
58            border-radius: 5px;
59            background: #F9F0DA;
60            color: #9E9C9C;
61        }
62        .bar1 button {
63            top: 0;
64            right: 0;
65            background: #7BA7AB;
66            border-radius: 0 5px 5px 0;
67        }
68        .bar1 button:before {
69            content: "\f002";
70            font-family: FontAwesome;
71            font-size: 16px;
72            color: #F9F0DA;
73        }
74
75/*搜索框2*/
76        .bar2 {background: #DABB52;}
77        .bar2 input, .bar2 button {
78            border-radius: 3px;
79        }
80        .bar2 input {
81            background: #F9F0DA;
82        }
83        .bar2 button {
84            height: 26px;
85            width: 26px;
86            top: 8px;
87            right: 8px;
88            background: #F15B42;
89        }
90        .bar2 button:before {
91            content: "\f105";
92            font-family: FontAwesome;
93            color: #F9F0DA;
94            font-size: 20px;
95            font-weight: bold;
96        }
97
98/*搜索框3*/
99        .bar3 {background: #F9F0DA;}
100        .bar3 form {background: #A3D0C3;} 101        .bar3 input, .bar3 button {
102            background: transparent;
103        }
104        .bar3 button {
105            top: 0;
110            font-family: FontAwesome;
111            font-size: 16px;
112            color: #F9F0DA;
113        }
114
115/*搜索框4*/
116        .bar4 {background: #F15B42;}
117        .bar4 form {
118            background: #F9F0DA;
119            border-bottom: 2px solid #BE290E; 120        }
121        .bar4 input, .bar4 button {
122            background: transparent;
123        }
124        .bar4 button {
125            top: 0;
126            right: 0;
127        }
128        .bar4 button:before {
129            content: "\f178";
130            font-family: FontAwesome;
131            font-size: 20px;
132            color: #be290e;
133        }
134
135/*搜索框5*/
136        .bar5 {background: #683B4D;}
137        .bar5 input, .bar5 button {
138            background: transparent;
139        }
140        .bar5 input {
141            border: 2px solid #F9F0DA;
142        }
143        .bar5 button {
144            top: 0;
145            right: 0;
146        }
147        .bar5 button:before {
148            content: "\f002";
149            font-family: FontAwesome;
150            font-size: 16px;
151            color: #F9F0DA;
152        }
153        .bar5 input:focus {
154            border-color: #311c24
155        }
156
157/*搜索框6*/
158        .bar6 {background: #F9F0DA;}
159        .bar6 input {
160            border: 2px solid #c5464a;
161            border-radius: 5px;
162            background: transparent;
163            top: 0;
164            right: 0;
165        }
166        .bar6 button {
167            background: #c5464a;
168            border-radius: 0 5px 5px 0;
169            width: 60px;
170            top: 0;
171            right: 0;
172        }
173        .bar6 button:before {
174            content: "搜索";
175            font-size: 13px;
176            color: #F9F0DA;
177        }
178
179/*搜索框7*/
180        .bar7 {background: #7BA7AB;}
181        .bar7 form {
182            height: 42px;
183        }
184        .bar7 input {
185            width: 250px;
186            border-radius: 42px;
187            border: 2px solid #324B4E;
188            background: #F9F0DA;
189            transition: .3s linear;
194        }
195        .bar7 button {
196            background: none;
197            top: -2px;
198            right: 0;
199        }
200        .bar7 button:before{
201          content: "\f002";
202          font-family: FontAwesome;
203          color: #324b4e;
204        }
205
206/*搜索框8*/
207        .bar8 {background: #B46381;}
208        .bar8 form {
209            height: 42px;
210        }
211        .bar8 input {
212            width: 0;
213            padding: 0 42px 0 15px;
214            border-bottom: 2px solid transparent;
215            background: transparent;
216            transition: .3s linear;
217            position: absolute;
218            top: 0;
219            right: 0;
220            z-index: 2;
221        }
222        .bar8 input:focus {
223            width: 300px;
224            z-index: 1;
225            border-bottom: 2px solid #F9F0DA;
226        }
227        .bar8 button {
228            background: #683B4D;
229            top: 0;
230            right: 0;
231        }
232        .bar8 button:before {
233            content: "\f002";
234            font-family: FontAwesome;
235            font-size: 16px;
236            color: #F9F0DA;
237        }
238    </style>
239 </head>
240 <body>
241 <div id="container">
242    <div class="search bar1">
243        <form>
244            <input type="text" placeholder="请输⼊您要搜索的内容..."> 245            <button type="submit"></button>
246        </form>
247    </div>
248
249    <div class="search bar2">
250        <form>
251            <input type="text" placeholder="请输⼊您要搜索的内容..."> 252            <button type="submit"></button>
253        </form>
254    </div>
255
256    <div class="search bar3">
257        <form>
258            <input type="text" placeholder="请输⼊您要搜索的内容..."> 259            <button type="submit"></button>
260        </form>
261    </div>
262
263    <div class="search bar4">
264        <form>
265            <input type="text" placeholder="请输⼊您要搜索的内容..."> 266            <button type="submit"></button>
267        </form>
268    </div>
269
270    <div class="search bar5">
271        <form>
272            <input type="text" placeholder="请输⼊您要搜索的内容..."> 273            <button type="submit"></button>
277    <div class="search bar6">
278        <form>
279            <input type="text" placeholder="请输⼊您要搜索的内容..."> 280            <button type="submit"></button>
281        </form>
282    </div>
283
284    <div class="search bar7">
285        <form>
286            <input type="text" placeholder="请输⼊您要搜索的内容..."> 287            <button type="submit"></button>
288        </form>
289    </div>
290
291    <div class="search bar8">
292        <form>
293            <input type="text" placeholder="请输⼊您要搜索的内容..."> 294            <button type="submit"></button>
295        </form>
296    </div>
297 </div>
298 </body>
299 </html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。