去掉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
如果本文对你有帮助,欢迎打赏本站