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

编程入门行业动态更新时间:2024-10-28 16:26:03

如何用css<a href=https://www.elefans.com/category/jswz/34/1771146.html style= 样式修改select下拉标签的默认箭头样式"/>

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

当需求是不让用ui框架，而要手动修改一个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;
}

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

更多推荐

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

本文发布于:2024-02-05 05:26:36，感谢您对本站的认可！

本文链接:https://www.elefans.com/category/jswz/34/1673493.html