如何用css样式修改select下拉标签的默认箭头样式

2021年11月12日 116次阅读 来源: 最初都是小白

当需求是不让用ui框架，而要手动修改一个select下拉列表的样式时…

像这样把图一改成图二：
（图一）：
《如何用css样式修改select下拉标签的默认箭头样式》
（图二）：
《如何用css样式修改select下拉标签的默认箭头样式》

代码如下：
select { 
    /* 鼠标移上，变小手 */
	 cursor: pointer;
     padding: 0 10px;
     /* 清除默认的箭头样式 */
     appearance: none;
     -moz-appearance: none;
     -webkit-appearance: none;
     /* 右侧添加箭头的背景图 自行调整位置 */
     background: url('img/xia.png') 210px center no-repeat #fff;
}

其他样式如边框，宽高等，可自行设置。

    原文作者：最初都是小白
    原文地址: https://blog.csdn.net/Originally_M/article/details/98968399
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞