图片-定义select向下箭头样式

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>图片-定义select向下箭头样式</title>
 6     </head>
 7     <style>
 8         * {
 9             margin: 0;
10             padding: 0;
11         }
12 
13         .icon-select1 {
14             width: 100%;
15             line-height: 40px;
16             cursor: pointer;
17             /*鼠标上移变成小手*/
18             appearance: none;
19             /*去掉默认的下拉三角*/
20             -moz-appearance: none;
21             -webkit-appearance: none;
22             background: url("../img/icon.png") no-repeat right center transparent;/* 下拉箭头图片 */
23             background-size: 15px 10px;/* 下拉箭头大小 */
24             /*添加下拉三角图标*/
25         }
26     </style>
27     <body>
28         <select class="icon-select1">
29             <option value="">查看详情</option>
30             <option value="">方形</option>
31             <option value="">圆形</option>
32             <option value="">锥形</option>
33         </select>
34     </body>
35 </html>

一辈子很短，努力的做好两件事就好；第一件事是热爱生活，好好的去爱身边的人；第二件事是努力学习，在工作中取得不一样的成绩，实现自己的价值，而不是仅仅为了赚钱。