html - 如何删除选择框的背景

Question

我必须删除选择框的背景，我使用过这样的代码

<select style="background:none;border:none">
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
</select>

但是在输出箭头出现了。我怎样才能隐藏那个箭头。

Answer 1

添加-webkit-appearance:none

<select style="background:none;border:none; -webkit-appearance:none">

或添加 div 并给出最大宽度。

<div style="width:80px; overflow:hidden">
<select style="background:none;border:none; width:97px">
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
</select>
</div>

更新了演示

Answer 2

使选择宽度超过 100% 并应用溢出：隐藏

select {
    overflow:hidden;
    width: 120%;
}

看到这个链接，第二个答案似乎更像你所追求的！

如何从 Firefox 中的选择元素中删除箭头