如何用底部边框和插入符号设置<select>的样式？

Question

如何设置Select元素的样式以使其看起来像图像中的？我正在努力使插入符号和线条同时出现。 我试过设置边框底：1px，然后设置-webkit-appearance：除尖号消失外没有其他。 选择 {  边框：0px 0px 1px 0px; } <选择>   选项1   选项2   选项3

Answer 1

您应该设置border-bottom而不是bottom-border，因为它在CSS中不存在

Answer 2

border-bottom
font-family

我认为这就是您真正需要做的所有更改，使其更像您显示的示例

Answer 3

我将从“整张纸” 或all: unset开始删除select element <的所有预定义的样式 / em>，然后根据需要样式：

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>