如何在 css 中創建帶有方向向下箭頭的自定義下拉菜單

Question

對於自定義 HTML 下拉菜單，我想使用 CSS 獲得方向向下箭頭樣式。但是我無法實現示例圖像中描述的下拉菜單的方向箭頭圖標樣式。 到目前為止，我只得到代碼片段中的三角形向下箭頭。 我怎樣才能得到向下的方向箭頭而不是實心三角形？

 select { /* styling */ background-color: white; border: thin solid blue; border-radius: 4px; display: inline-block; font: inherit; line-height: 1.5em; padding: 0.5em 3.5em 0.5em 1em; background-image: linear-gradient(45deg, transparent 50%, gray 50%), linear-gradient(135deg, gray 50%, transparent 50%), linear-gradient(to right, transparent, transparent); background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), calc(100% - 2.5em) 0.5em; background-size: 5px 5px, 5px 5px, 1px 1.5em; background-repeat: no-repeat; /* reset */ margin: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none; }

 <select> <option>option 1</option> <option>option 2</option> <option>option 3</option> </select>

注意：我可以使用上面的 CSS 實現三角形向下箭頭。但是我需要方向向下箭頭圖標樣式，如下面的屏幕截圖所示。

謝謝！

Answer 1

您可以像下面這樣調整您的代碼：

 select { /* styling */ background-color: white; border: thin solid blue; border-radius: 4px; display: inline-block; font: inherit; line-height: 1.5em; padding: 0.5em 3.5em 0.5em 1em; --g:transparent 50%, gray 50% calc(50% + 1px), transparent calc(50% + 2px); background-image: linear-gradient(45deg, var(--g)), linear-gradient(-45deg, var(--g)); background-position: right 20px top calc(1em + 2px), right 15px top calc(1em + 2px); background-size: 5px 5px; background-repeat: no-repeat; /* reset */ margin: 0; box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none; }

 <select> <option>option 1</option> <option>option 2</option> <option>option 3</option> </select>

或者考慮使用 SVG，如下所述： How to add an SVG icon as select dropdown arrow?