码迷,mamicode.com
首页 > Web开发 > 详细

CSS自定义select下拉选择框的样式(不用其他标签模拟)

时间:2015-07-16 15:58:30      阅读:130      评论:0      收藏:0      [点我收藏+]

标签:

CSS自定义select下拉选择框的样式(不用其他标签模拟):http://www.jb51.net/css/148841.html

CSS美化选择框:http://www.cnblogs.com/shishm/archive/2012/03/02/2376759.html

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4 <meta charset="UTF-8">
 5 <title>html5</title>
 6 <style>
 7 .styled-select select {
 8    background: transparent;
 9    width: 268px;
10    padding: 5px;
11    font-size: 16px;
12    border: 1px solid #ccc;
13    height: 34px;
14    -webkit-appearance: none; /*for chrome*/
15 }
16 .styled-select {
17     border:1px solid #333;
18    width: 240px;
19    height: 34px;
20    overflow: hidden;
21    background: url(new_arrow.jpg) no-repeat right #ddd;
22 }
23 </style>    
24 </head>
25 <body>    
26 <div class="styled-select">
27     <select>
28         <option>Here is the first option</option>
29         <option>The second option</option>
30     </select>
31 </div>
32 <script>
33 </script>
34 </body>
35 </html>

 

CSS自定义select下拉选择框的样式(不用其他标签模拟)

标签:

原文地址:http://www.cnblogs.com/k11590823/p/4651392.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!