如何造型 <select>底部邊框和插入符號？

Question

如何設置Select元素的樣式以使其看起來像圖像中的？ 我正在努力使插入符號和線條同時出現。 我試過設置border-bottom: 1px ，然后設置-webkit-appearance: none除尖號消失外-webkit-appearance: none 。

 select { border: 0px 0px 1px 0px; } 

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

Answer 1

您將設置border-bottom而不是bottom-border ，它在CSS中不存在

Answer 2

border-bottom
font-family

我認為這就是您真正需要做的所有更改，使其更像您顯示的示例

Answer 3

我將從“ clean sheet”或all: unset以刪除select 元素的所有預定義樣式 ，然后根據需要對其進行樣式設置 ：

 select { all: unset; padding-right: 15px; border-bottom: 1px solid; background: url('https://www.charbase.com/images/glyph/9662') no-repeat right; background-size: 16px; } 

 <select> <option>All Question Types</option> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> </select>