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; }