在OS X上的Firefox中，Bootstrap 3 Styled Select下拉菜单看起来很难看

<select>在Bootstrap 3中设置表单元素的样式时，它将在OS X的Firefox中呈现一个难看的按钮：

（http://bootply.com/98385）

显然，这已经是一段时间以来的已知问题了，并且有许多hack和变通办法，但没有一个很干净（ https://github.com/twbs/bootstrap/issues/765）。我想知道是否有人使用Bootstrap下拉列表或其他插件找到了解决此问题的好方法。我故意选择使用HTML<select>而不是Bootstrap下拉列表，因为在移动设备上使用长列表时，可用性更好。

这是Firefox问题还是Bootstrap问题？

详细信息：Mac OS X 10.9，Firefox 25.0.1

更新12/4/13：我对每种浏览器如何<select>使用Firefox，Chrome和Safari在OS X 10.9上呈现的进行了并排比较，以响应@zessx（使用http://bootply.com / 98425）。显然，<select>表单元素在浏览器和操作系统之间的呈现方式之间存在很大差异：

我了解，<select>根据您使用的操作系统，对标签的处理方式有所不同，因为存在基于操作系统的本机控件来指示样式和行为。但是，class="form-control"导致Bootstrap的<select>表单元素在Firefox中看起来与众不同的原因是什么？为什么<select>Firefox中默认的未设置样式的样式看起来可以，但是一旦被设置样式，则看起来很难看？

您实际上可以更改IE中下拉箭头周围的灰色框：

        select::-ms-expand {
            width:12px;
            border:none;
            background:#fff;
        }

实际上，您可以使用下拉字段执行几乎所有操作，并且在每个浏览器上看起来都一样，请查看代码示例

select.custom {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20fill%3D%22%23555555%22%20%0A%09%20width%3D%2224px%22%20height%3D%2224px%22%20viewBox%3D%22-261%20145.2%2024%2024%22%20style%3D%22enable-background%3Anew%20-261%20145.2%2024%2024%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cpath%20d%3D%22M-245.3%2C156.1l-3.6-6.5l-3.7%2C6.5%20M-252.7%2C159l3.7%2C6.5l3.6-6.5%22%2F%3E%0A%3C%2Fsvg%3E");
  padding-right: 25px;
  background-repeat: no-repeat;
  background-position: right center;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

select.custom::-ms-expand {
  display: none;
}

https://jsfiddle.net/x76j455z/10/

在rafx和Sina的出色回答的基础上，这是一个仅针对Firefox的代码段，并将默认按钮替换为从Bootstrap图标主题复制的下箭头。

之前：

后：

@-moz-document url-prefix() {
  select.form-control {
    padding-right: 25px;
    background-image: url("data:image/svg+xml,\
      <svg version='1.1' xmlns='http://www.w3.org/2000/svg' width='14px'\
           height='14px' viewBox='0 0 1200 1000' fill='rgb(51,51,51)'>\
        <path d='M1100 411l-198 -199l-353 353l-353 -353l-197 199l551 551z'/>\
      </svg>");
    background-repeat: no-repeat;
    background-position: calc(100% - 7px) 50%;
    -moz-appearance: none;
    appearance: none;
  }
}

（内联SVG具有反斜杠和换行符，以提高可读性。如果它们在您的资产管道中造成麻烦，请将其删除。）

这是JSFiddle

有一个外观漂亮的jQuery插件，它显然与名为SelectBoxIt（http://gregfranko.com/jquery.selectBoxIt.js/）的Bootstrap兼容。我喜欢它的地方是，它可以让您在所使用的任何操作系统上触发本机选择框，同时仍保持一致的样式（http://gregfranko.com/jquery.selectBoxIt.js/#TriggertheNativeSelectBox）。哦，我希望Bootstrap提供此选项！

唯一的缺点是，它在解决方案中增加了另一层复杂性，并且需要进行额外的工作以确保与所有其他插件随时间的升级/修补而兼容。我也不确定Bootstrap 3的兼容性。但是，这可能是一个很好的解决方案，可确保浏览器和操作系统之间的外观保持一致。

这是正常现象，这是由<select>Firefox下的默认样式引起的：您无法设置line-height，那么padding当您需要自定义时需要继续玩<select>。

示例，结果在Firefox 25 / Chrome 31 / IE 10下：

<select>
  <option>Default</option>
  <option>Default</option>
  <option>Default</option>
</select>

<select class="form-control">
  <option>Bootstrap</option>
  <option>Bootstrap</option>
  <option>Bootstrap</option>
</select>

<select class="form-control custom">
  <option>Custom</option>
  <option>Custom</option>
  <option>Custom</option>
</select>

select.custom {
  padding: 0px;
}

自举

我敢肯定-webkit-appearance:none，Chrome和Safari的窍门不多。

编辑：-moz-appearance: none现在应该可以在Firefox上正常工作。

这很简单。您只需要放入.form-control以下内容：

.form-control{
        -webkit-appearance:none;
        -moz-appearance: none;
        -ms-appearance: none;
        -o-appearance: none;
        appearance: none;
}

这将删除浏览器的外观并允许使用CSS。

使用Bootstrap 4+，您可以简单地添加类custom-select为所选输入，以删除特定于浏览器的样式并保留箭头图标。

此处的文档：Bootstrap 4自定义表单选择菜单

我发现了解决此特定问题的两种潜在方法：

1. 使用选择

2. 使用以下方式定位mozilla浏览器@-moz-document url-prefix()：

@-moz-document url-prefix() {
  select {
    padding: 5px;
  }
}

我们一直在为Bootstrap使用插件bootstrap-select来进行样式选择。确实运作良好，并具有许多有趣的附加功能。我可以肯定地推荐它。

我正在使用选择的。查看：http : //harvesthq.github.io/chosen/

它可以在Firefox，Chrome，IE和Safari上以相同的样式运行。但不是在移动设备上。

您可以使用jquery.chosen或bootstrap-select为按钮添加样式。两者都很好用。使用选择或引导选择的注意事项：它们都隐藏原始选择，并使用自己的ID添加到自己的div中。例如，如果您同时使用jquery.validate，它将不会找到要对其进行验证的原始选择，因为它已被重命名。