标签：absolute form order margin div 纯css3 arc device viewport
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>
标签：absolute form order margin div 纯css3 arc device viewport
原文地址：http://www.cnblogs.com/chengyunshen/p/7277374.html
