84669 人学习
152542 人学习
20005 人学习
5487 人学习
7821 人学习
359900 人学习
3350 人学习
180660 人学习
48569 人学习
18603 人学习
40936 人学习
1549 人学习
1183 人学习
32909 人学习
是否有可能将select标签的下拉箭头更改为由4个元素组成的自定义箭头。我想要它像这样：左边有3条水平线，右边有一个向下的箭头
我成功地用一个元素（一个水平线）实现了这个效果
.select-wrapper::before { content: ""; position: absolute; top: 50%; display: block; width: 9px; height: 2px; background: black; }
我相信你想要实现与这个 CodePen类似的效果。代码几乎完全来自于SVNM在这个问题的回答
Volvo Saab Mercedes Audi
select { -webkit-appearance: none; -moz-appearance: none; background: transparent; background-image: url("https://paul7dxb.github.io/hosted-assets/SomePNGs/arrow.png"); background-repeat: no-repeat; background-size: 40px 20px; background-position-x: 80%; background-position-y: 50%; border: 1px solid #dfdfdf; border-radius: 2px; margin-right: 2rem; padding: 1rem; padding-right: 2rem; }
我相信你想要实现与这个 CodePen类似的效果。代码几乎完全来自于SVNM在这个问题的回答
来自该回答的修改
示例HTML
CSS
select { -webkit-appearance: none; -moz-appearance: none; background: transparent; background-image: url("https://paul7dxb.github.io/hosted-assets/SomePNGs/arrow.png"); background-repeat: no-repeat; background-size: 40px 20px; background-position-x: 80%; background-position-y: 50%; border: 1px solid #dfdfdf; border-radius: 2px; margin-right: 2rem; padding: 1rem; padding-right: 2rem; }