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

最新推荐文章于 2024-04-11 07:00:30 发布

原创最新推荐文章于 2024-04-11 07:00:30 发布 · 5.5k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#select箭头修改 #修改select默认样式

Css 专栏收录该内容

20 篇文章

订阅专栏

本文介绍了一种不使用UI框架，而是通过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;
}