效果：
代码：
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)