1.很久之前在网上看到的，就随手保存起来了。
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="http://cdn.bootcss.com/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 }
22
23 #container {
24 width: 500px;
25 height: 820px;
26 margin: 0 auto;
27 }
28 div.search {padding: 30px 0;}
29
30 form {
31 position: relative;
32 width: 300px;
33 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;
106 right: 0;
107 }
108 .bar3 button:before {
109 content: "\f002";
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
180 /*搜索框7*/
181 .bar7 {background: #7BA7AB;}
182 .bar7 form {
183 height: 42px;
184 }
185 .bar7 input {
186 width: 250px;
187 border-radius: 42px;
188 border: 2px solid #324B4E;
189 background: #F9F0DA;
190 transition: .3s linear;
191 float: right;
192 }
193 .bar7 input:focus {
194 width: 300px;
195 }
196 .bar7 button {
197 background: none;
198 top: -2px;
199 right: 0;
200 }
201 .bar7 button:before{
202 content: "\f002";
203 font-family: FontAwesome;
204 color: #324b4e;
205 }
206
207 /*搜索框8*/
208 .bar8 {background: #B46381;}
209 .bar8 form {
210 height: 42px;
211 }
212 .bar8 input {
213 width: 0;
214 padding: 0 42px 0 15px;
215 border-bottom: 2px solid transparent;
216 background: transparent;
217 transition: .3s linear;
218 position: absolute;
219 top: 0;
220 right: 0;
221 z-index: 2;
222 }
223 .bar8 input:focus {
224 width: 300px;
225 z-index: 1;
226 border-bottom: 2px solid #F9F0DA;
227 }
228 .bar8 button {
229 background: #683B4D;
230 top: 0;
231 right: 0;
232 }
233 .bar8 button:before {
234 content: "\f002";
235 font-family: FontAwesome;
236 font-size: 16px;
237 color: #F9F0DA;
238 }
239 </style>
240 </head>
241 <body>
242 <div id="container">
243 <div class="search bar1">
244 <form>
245 <input type="text" placeholder="请输入您要搜索的内容...">
246 <button type="submit"></button>
247 </form>
248 </div>
249
250 <div class="search bar2">
251 <form>
252 <input type="text" placeholder="请输入您要搜索的内容...">
253 <button type="submit"></button>
254 </form>
255 </div>
256
257 <div class="search bar3">
258 <form>
259 <input type="text" placeholder="请输入您要搜索的内容...">
260 <button type="submit"></button>
261 </form>
262 </div>
263
264 <div class="search bar4">
265 <form>
266 <input type="text" placeholder="请输入您要搜索的内容...">
267 <button type="submit"></button>
268 </form>
269 </div>
270
271 <div class="search bar5">
272 <form>
273 <input type="text" placeholder="请输入您要搜索的内容...">
274 <button type="submit"></button>
275 </form>
276 </div>
277
278 <div class="search bar6">
279 <form>
280 <input type="text" placeholder="请输入您要搜索的内容...">
281 <button type="submit"></button>
282 </form>
283 </div>
284
285 <div class="search bar7">
286 <form>
287 <input type="text" placeholder="请输入您要搜索的内容...">
288 <button type="submit"></button>
289 </form>
290 </div>
291
292 <div class="search bar8">
293 <form>
294 <input type="text" placeholder="请输入您要搜索的内容...">
295 <button type="submit"></button>
296 </form>
297 </div>
298 </div>
299 </body>
300 </html>
时间： 2024-08-02 13:30:01