如何造型 <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>