所有浏览器均匀选择框样式?

时间:2013-02-07 10:58:12

标签: javascript html css cross-browser

我正在开发一个包含多个选择框的表单的Web应用程序。在Firefox中,选择框始终看起来像文本输入和多选框,它们模仿后者使用的CSS样式,如下图所示:

Select box style in Firefox

在Chrome和Safari中,不幸的是,选择框有自己的,非常难看的设计,与其他输入字段不一致,从而打破了设计:

Select box style in Chrome and Safari

有没有办法(使用CSS和/或JS)使用Firefox风格在所有浏览器中使选择框看起来相同?

2 个答案:

答案 0 :(得分:1)

啊,现在我自己找到了这个工作的CSS / JS包:Formalize.me

似乎比UniformJS更积极地维护。我想我会先用这个。

答案 1 :(得分:0)

至少我知道如何在Firefox和Chrome之间同步SELECT样式。 Edge很快将基于Chromium,因此它将与Chrome / Chromium样式同步。

使用此CSS:

/* FIREFOX FIX OF UGLY SELECT BOXES */
@supports (-moz-appearance:none) {

  SELECT
  {
  -moz-appearance:none !important;
  background: transparent url('data:image/gif;base64,R0lGODlhBgAGAKEDAFVVVX9/f9TU1CgmNyH5BAEKAAMALAAAAAAGAAYAAAIODA4hCDKWxlhNvmCnGwUAOw==') right center no-repeat !important;
  background-position: calc(100% - 5px) center !important;
  }

}