zoukankan html css js c++ java
好看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="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              500px;
 25             height: 820px;
 26             margin: 0 auto;
 27         }
 28         div.search {padding: 30px 0;}
 29 
 30         form {
 31             position: relative;
 32              300px;
 33             margin: 0 auto;
 34         }
 35 
 36         input, button {
 37             border: none;
 38             outline: none;
 39         }
 40 
 41         input {
 42              100%;
 43             height: 42px;
 44             padding-left: 13px;
 45         }
 46 
 47         button {
 48             height: 42px;
 49              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              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              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              250px;
186             border-radius: 42px;
187             border: 2px solid #324B4E;
188             background: #F9F0DA;
189             transition: .3s linear;
190             float: right;
191         }
192         .bar7 input:focus {
193              300px;
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              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              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>
274         </form>
275     </div>
276 
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>
设计网站大全https://www.wode007.com/favorites/sjdh
查看全文
相关阅读:
教师节快乐！
来自学长同学分享的学习方法
 刘奕佳：我的职校新生活 | 班级日常分享
 19级：班级日常分享 | 一天一瞬间
 珍惜、珍爱！
19级:班级日常分享 | 一天一瞬间
 204787 ,194787 |0001 1131 0001 4226 7035 ![2480 ]
1－N的自然数中，少了一个，找出这个数小强斋
 获取某一天之前或者之后多少天的日期小强斋
 获取某一天之前或者之后多少天的日期小强斋
原文地址：https://www.cnblogs.com/ypppt/p/13149501.html