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

【css2、css3】css改变select选择框的样式

时间:2016-12-19 18:31:47      阅读:192      评论:0      收藏:0      [点我收藏+]

标签:back   order   --   pre   分享   one   doctype   image   dex   

效果:

技术分享

代码:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8" />
 5     <title>Document</title>
 6     <style type="text/css">
 7         /* 去掉默认样式,设置新的样式 */
 8         .select-style{
 9             position: relative;
10             display: inline-block;
11         }
12         .select-style select{
13             display:inline-block;
14             box-sizing:border-box;
15             background:none;
16             border:1px solid #222;
17             outline:none;
18             -webkit-appearance:none;
19             padding:5px 15px 5px 5px;
20             line-height:inherit;
21             color:inherit;
22             cursor:pointer;
23             font-size:14px;
24             position:relative;
25             z-index:3;
26             height:100%;
27             border-radius:2px;
28         }
29         .select-style:after{
30             content:‘*‘;
31             color:red;
32             position:absolute;
33             top: 0;
34             bottom:0;
35             right:5px;
36             height:100%;
37             padding:5px 0;
38         }
39         .select-style select option{
40             color:#222;
41         }
42         .select-style select option:hover{
43             background:#535353;
44             color:#fff;
45         }
46         .select-style select option:checked{
47             background:#535353;
48             color:#fff;
49         }
50     </style>
51 </head>
52 <body>
53     <!-- html 布局 -->
54     <span class="select-style">
55         <select>
56             <option>option 1</option>
57             <option>option 2</option>
58             <option>option 3</option>
59             <option>option 4</option>
60             <option>option 5</option>
61         </select>
62     </span>
63 </body>
64 </html>

 

【css2、css3】css改变select选择框的样式

标签:back   order   --   pre   分享   one   doctype   image   dex   

原文地址:http://www.cnblogs.com/luanhewei/p/6198360.html

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