【CSS】css改变select选择框的样式

效果：

代码：

 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>

 

 

个人博客：[**午后南杂**](http://recoluan.gitlab.io)

posted @ 2016-12-19 17:34  reco_luan  阅读(838)  评论(0)  编辑  收藏  举报