在OS X上的Firefox中,Bootstrap 3 Styled Select下拉列表看起来很丑陋

Question

<select>在Bootstrap 3中设置表单元素样式时,它会在OS X上的Firefox中呈现一个丑陋的按钮:

(http://bootply.com/98385)

这显然是一段时间已知的问题,并且有许多黑客和解决方法,其中没有一个非常干净(https://github.com/twbs/bootstrap/issues/765).我想知道除了使用Bootstrap下拉列表或额外的插件之外,是否有人找到了解决此问题的良好解决方案.我故意选择使用HTML <select>而不是Bootstrap下拉菜单,因为移动设备上的长列表可用性更好.

这是Firefox问题还是Bootstrap问题？

详细信息:Mac OS X 10.9,Firefox 25.0.1

2013年12月4日更新:我对每个浏览器如何<select>使用Firefox,Chrome和Safari 呈现OS X 10.9以及@zessx(使用http://bootply.com)进行了并排比较/ 98425).显然,<select>在浏览器和操作系统之间呈现表单元素的方式有很大差异:

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

Answer 1

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

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

Answer 2

Actualy你可以用下拉字段做几乎所有事情,并且它在每个浏览器上看起来都一样,看看代码示例

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/

Answer 3

基于rafx和新浪的优秀答案,这里有一个片段,仅针对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

Answer 4

有一个看起来很漂亮的jQuery插件显然与Bootstrap一起使用,名为SelectBoxIt(http://gregfranko.com/jquery.selectBoxIt.js/).我喜欢它的是它允许你在你所使用的任何操作系统上触发本机选择框,同时仍然保持一致的样式(http://gregfranko.com/jquery.selectBoxIt.js/#TriggertheNativeSelectBox).哦,我希望Bootstrap提供这个选项!

唯一的缺点是它在解决方案中增加了另一层复杂性,以及确保与所有其他插件兼容的额外工作,因为它们随着时间的推移而升级/修补.我也不确定Bootstrap 3的兼容性.但是,这可能是确保浏览器和操作系统之间一致外观的良好解决方案.

Answer 5

这是正常行为,它是由<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;
}

Bootply

Answer 6

我敢肯定-webkit-appearance:noneChrome和Safari的诀窍.

编辑:-moz-appearance: none现在应该在Firefox上运行.