效果：
代码：
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>
时间： 2024-10-13 13:34:52