好看css搜索框样式 |
您所在的位置：网站首页 › dw搜索框怎么设置颜色 › 好看css搜索框样式 |
好看css搜索框样式
|
最简单实用的CSS3搜索框样式，纯CSS效果无需任何javascript，其中部分搜索框在点击的时候有动画特效，搜索框的应用也是比较普通的，效果如下：
代码如下： 1 2 3 4 5 6 8款纯CSS3搜索框 7 8 9 10 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 /*搜索框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; 190 float: right; 191 } 192 .bar7 input:focus { 193 width: 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 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 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299
|
【本文地址】
今日新闻 |
推荐新闻 |