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

效果：

代码：

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8" />
     <title>Document</title>
     <style type="text/css">
         /* 去掉默认样式，设置新的样式 */
         .select-style{
             position: relative;
             display: inline-block;
         }
         .select-style select{
             display:inline-block;
             box-sizing:border-box;
             background:none;
             border:1px solid #222;
             outline:none;
             -webkit-appearance:none;
             padding:5px 15px 5px 5px;
             line-height:inherit;
             color:inherit;
             cursor:pointer;
             font-size:14px;
             position:relative;
             z-index:3;
             height:100%;
             border-radius:2px;
         }
         .select-style:after{
             content:'*';
             color:red;
             position:absolute;
             top: 0;
             bottom:0;
             right:5px;
             height:100%;
             padding:5px 0;
         }
         .select-style select option{
             color:#222;
         }
         .select-style select option:hover{
             background:#535353;
             color:#fff;
         }
         .select-style select option:checked{
             background:#535353;
             color:#fff;
         }
     </style>
 </head>
 <body>
     <!-- html 布局 -->
     <span class="select-style">
         <select>
             <option>option 1</option>
             <option>option 2</option>
             <option>option 3</option>
             <option>option 4</option>
             <option>option 5</option>
         </select>
     </span>
 </body>
 </html>

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