zoukankan html css js c++ java
个性搜索框

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>
查看全文
相关阅读:
自己常用网站记录
 css弹性布局指定显示行数多余文字去掉用省略号代替以及弹性布局中css 卡片阴影效果
 微信小程序页面传参被截取问题
 阴影效果 css3 为什么要加 -moz-box-shadow -webkit-box-shadow -o-box-shadow,直接用box-shadow不是都能识别吗？
css常用清除浮动方式
 什么是微信小程序云开发它的作用是什么
 JMeter压测“java.net.SocketException: Socket closed”解决方法
 Jmeter压力测试工具安装及使用教程
 OnActionExecuting和OnActionExecuted执行顺序
 C#循环下载多个文件（把多个文件压缩成一个文件可以一次性下载）
原文地址：https://www.cnblogs.com/chengyunshen/p/7277374.html