若要穩定的在多個瀏覽器上實現下拉選單框的最右側有一個 V 的符號，可以參考一下 Stack Overflow 上的一組經典範例。
內容
1. appearance: none !important;
移除各家瀏覽器預設的樣式
2. background: url(“…”) no-repeat;
自定義的背景圖片，同時用 no-repeat 確保只使用一次
3. background-position: calc(100% – 0.75rem) center !important;
調整圖片的相對位置
4. padding-right: 2rem !important;
在 select 標籤內留下足夠的空間給圖示用
|
1 2 3 4 5 6 7 8 |
SELECT { background: url("data:image/svg+xml,<svg height='10px' width='10px' viewBox='0 0 16 16' fill='%23000000' xmlns='http://www.w3.org/2000/svg'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>") no-repeat; background-position: calc(100% - 0.75rem) center !important; -moz-appearance:none !important; -webkit-appearance: none !important; appearance: none !important; padding-right: 2rem !important; } |
