Css Bootstrap 3风格的选择下拉菜单在OS X上的Firefox中看起来很难看

在Bootstrap 3中设置表单

元素的样式时，它会在Firefox on OS X中呈现一个丑陋的按钮：

（）

这显然是一个已知的问题已有一段时间了，并且有许多黑客和解决方法，其中没有一个是非常干净的（）。我想知道除了使用引导下拉列表或额外的插件之外，是否有人找到了解决这个问题的好方法。我特意选择使用HTML

，而不是引导式下拉列表，因为在移动设备上使用长列表的可用性更好

这是Firefox问题还是引导问题

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

更新12/4/13:我对每个浏览器如何在OS X 10.9上使用Firefox、Chrome和Safari呈现

，以响应@zessx（使用）。显然，

表单元素在不同浏览器和操作系统中的呈现方式有很大区别：

---

我知道，

标记的处理方式会根据您使用的操作系统而有所不同，因为有一些基于本机操作系统的控件规定了样式和行为。但是，引导程序中的

class=“form control”

是什么导致Firefox中的

表单元素看起来不同的呢？为什么Firefox中默认的、未设置样式的

看起来还可以，但一旦设置了样式，它看起来就很难看？

这是正常的行为，是由Firefox下默认的

样式造成的：你不能设置

行高

，那么当你想要定制

时，你需要使用

填充

例如，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>

---

有一个外观光滑的jQuery插件，它显然可以很好地使用名为SelectBoxIt（）的引导程序。我喜欢它的一点是，它允许您在任何操作系统上触发本机选择框，同时仍然保持一致的样式（）。哦，我多么希望Bootstrap提供这个选项

---

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

我确信

-webkit外观：没有一个
可以为Chrome和Safari带来好处

编辑：
-moz外观：无
现在应该可以在Firefox上正常工作。
我使用的是Selected。
看看：

它在Firefox、Chrome、IE和Safari上以同样的风格工作。但不是在移动设备上。
我发现了两种解决这个特定问题的潜在方法：

使用

使用
@-moz document url-prefix（）
将mozilla浏览器作为目标，如下所示：

@-moz文档url-prefix（）{
挑选{
填充物：5px；
}
}
您实际上可以更改IE中下拉箭头周围的灰色框：

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

我们一直在使用该插件引导数据选择。真的很好用，有很多有趣的附加功能。我当然可以推荐。
您可以使用jquery.selected或bootstrap select为按钮添加样式。这两种方法都非常有效。使用Selected或bootstrap select的注意事项：它们都隐藏了原始的select，并使用自己的ID添加到自己的div中。例如，如果同时使用jquery.validate，它将找不到要对其进行验证的原始select，因为它已被重命名
 实际上，您几乎可以使用下拉字段完成所有操作，并且在每个浏览器上都会显示相同的内容，请看一个代码示例

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;
}

这很容易。您只需在
中放入表单控件
即可：

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

这将删除浏览器的外观，并允许使用CSS。
在rafx和新浪的优秀答案的基础上，这里有一个仅针对Firefox的片段，并用从引导图标主题复制的下插入符号替换默认按钮

之前：


之后：


@-moz文档url-prefix（）{
select.form-control{
右边填充：25px；
背景图像：url（“数据：图像/svg+xml\
\
\
");
背景重复：无重复；
背景位置：钙（100%-7px）50%；
-moz外观：无；
外观：无；
}
}

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

这是使用引导程序4+的，您只需为您的选择输入添加类
自定义选择
，即可删除特定于浏览器的样式并保留箭头图标

此处的文档：
对于FireFox用户来说，这是正常的，也不难看。Bootstrap只使用CSS样式，不会使用脚本来将该选择转换为列表项，我相信基金会确实如此。也看看那里发生了什么。不同的浏览器呈现表单元素的方式不同。Chrome看起来最棒。如果你调整尺寸，FireFox的原生选择会变得模糊，但它们看起来是这样的：谢谢你，克里斯蒂娜。我可以接受Firefox定制样式的
，尽管它确实有点模糊。唯一的问题是，在Chrome和Safari中，它看起来仍然像一个默认的
元素——换句话说，自定义样式似乎只适用于Firefox。（使用）好的，你可以把选择css放在一个webkit-only媒体查询（atsign）媒体屏幕中，（-webkit-min-device pixel ratio:0）{}然后把没有样式放在选择之外，这样firefox和ie以及其他所有人都不会选择它们。一旦你在一个select上粘贴了一个边框，firefox就会在你的BS3图像中做第一列。@ChristinaArasmoBeymer作为一个firefox用户，我发现OS X上的这些下拉按钮非常难看；它们看起来像一个小男孩
.form-control{
        -webkit-appearance:none;
        -moz-appearance: none;
        -ms-appearance: none;
        -o-appearance: none;
        appearance: none;
}

@-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;
  }
}