Question

我正试图摆脱选择框的箭头及其所有痕迹，例如该箭头的空间。

我使用这个CSS隐藏了箭头：

select {
    -moz-appearance: none;
    text-indent: 0.01px;
    text-overflow: '';
}

但是选择框右侧仍有空格。我怎么能摆脱它？

Answer 1

众所周知，选择方块很难打造。

我发现这种技术很好，很简单，并且跨浏览器工作得很好：http://bavotasan.com/2011/style-select-box-using-only-css/

基本上，您将选择透明，并将其放置在一个稍微小一点的溢出隐藏包装<div>中，并使用您的字段样式。这会使选择框的右侧消失，只留下您的视觉样式。

Answer 2

尝试使用-moz-appearance: listbox;代替none。依靠box-shadow而非border绘制边框，因为border会导致下拉按钮显示。

select {
    -moz-appearance: listbox;
    box-shadow: 0 0 0 1px gray;    
}

这就是它在Firefox 25（Mac）中的外观：

enter image description here

此外，您可能会发现以下页面很有用，您可以根据您要实现的目标为-moz-appearance尝试不同的值。