html - 删除下拉列表中的按钮

Question

有没有办法隐藏或删除下拉列表中的箭头按钮？

Answer 1

是的，至少在 webkit 中:http://jsfiddle.net/zzTjy/1/ .

HTML

<select>
    <option>123</option>
</select>

CSS

SELECT { -webkit-appearance: none; }

值得注意的是，Mozilla 支持-moz-appearance，但它并没有隐藏下拉列表中的箭头。这在很长一段时间内一直是一个悬而未决的问题。

Mozilla 还指出:

Do not use this property on Web sites: not only is it non-standard, but its behavior change from one browser to another.

这可能有点苛刻，但您当然不应该使用 appearance 来更改元素的预期行为。

延伸阅读

• > More Examples
• > Bug to Implement in Mozilla
• > How to remove the arrow from a select element in Firefox