去掉select元素的默认下拉三角可通过appearance属性置为none,自定义下拉三角图标可以通过背景图片实现，具体实现代码如下：

<div class="com-sel">
      <select class="com-opt">
            <option value="">查看详情</option>
            <option value="">方形</option>
            <option value="">圆形</option>
            <option value="">锥形</option>
        </select>
</div>

.com-sel {
    line-height: 3rem;
    cursor: pointer;        /*鼠标上移变成小手*/
}

.com-opt {
    width: 10%;
    color: #999;
    /*去掉默认的下拉三角*/
    appearance:none;  
    -moz-appearance:none;  
    -webkit-appearance:none;
    /*添加下拉三角图标*/
   background: url("../img/tranger.jpg") no-repeat right center transparent;
}

参考来源：https://blog.csdn.net/nishiwodebocai21/article/details/82350679

赏 支付宝扫码打赏 微信扫码打赏

如果本文对你有帮助，欢迎打赏本站