所有浏览器的统一选择框样式？答案

【问题标题】：Uniform select box style across all browsers?所有浏览器的统一选择框样式？
【发布时间】：2013-01-22 20:30:54
【问题描述】：

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

不幸的是，在 Chrome 和 Safari 中，选择框有自己的非常丑陋的设计，与其他输入字段不一致，从而破坏了设计：

是否有任何方法（使用 CSS 和/或 JS）使选择框在所有浏览器中看起来都一样，使用 Firefox 样式？

【问题讨论】：

标签： javascript html css cross-browser

【解决方案1】：

啊，现在我自己找到了适合这项工作的 CSS/JS 包：Formalize.me

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

【讨论】：

【解决方案2】：

至少我知道如何在 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;
  }

}

【讨论】：