html - HTML 选择框 - 摆脱箭头及其空间

Question

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

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

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

但是，选择框的右侧仍然有一个空格。我怎样才能摆脱它？

score 1 · Accepted Answer

众所周知，选择框很难设计。

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

本质上，您将选择变为透明，并将其放置在一个稍小的溢出隐藏包装<div>中，并带有您的字段样式。这将关闭选择框的右侧，只留下您的视觉样式。

score 0 · Accepted Answer

尝试-moz-appearance: listbox;代替none. 靠box-shadow，不要border画边框，那样border会导致下拉按钮出现。

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

这是它在 Firefox 25 (Mac) 中的样子：

在此处输入图像描述

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

2 回答 2