css - 使用内联或作用域 CSS 恢复默认的 Firefox <select> 样式

Question

我在一个网站上工作，该网站的 select 元素有很多(不太好)样式，我想恢复某个特定页面的 firefox 默认值。它似乎主要是 background和 border破坏 firefox 渲染的样式。

问题是:

a) 我不知道默认的浏览器样式应该是什么才能让它看起来像没有设置样式时的样子。当我查看浏览器样式下的网络检查器时，它是一个非常长的设置列表，看起来只是为了覆盖两个样式表设置而矫枉过正

b) 我不想应用所有 firefox 特定的浏览器样式并最终破坏其他浏览器上的样式。

如何恢复默认设置而不弄乱一切？

可接受的答案可以是内联的或范围内的 <style>元素，但不能更改或省略主样式表。

更新: 这是一个快速演示，说明了问题和当前提出的答案的失败结果。这里还有一个 jfiddle:http://jsfiddle.net/pkd3byud/2/

select { margin: 10px 0; }
div select {
    border: 2px solid tomato;
}

.oriol {
    all: unset;
}

.boucher {
    background: initial;
    border: initial;
}

<select>
    <option>Option</option>
</select>
<div>
    <select>
        <option>Option</option>
    </select>
</div>
<div>
    <select class="oriol">
        <option>Option</option>
    </select>
</div>
<div>
    <select class="boucher">
        <option>Option</option>
    </select>
</div>

Answer 1

防止应用某些样式的唯一方法是:

• 从样式表中删除这些样式
• 用所需的样式覆盖它们

既然你不想要第一种方式，那肯定是第二种方式。

CSS3 引入了 initial和 unset关键字，以及 all简写属性。因此，要取消设置某些样式，您可以使用

background: unset; /* Unset single property */

all: unset; /* Unset all properties (but unicode-bidi, direction) */

select[data-reset] {
  all: unset;
}

<select data-reset>
  <option>Option</option>
</select>
<select data-original>
  <option>Option</option>
</select>

但是，这会将属性设置为其 initial value .规范中定义的初始值可能与浏览器使用的默认样式表不同。所以它在实践中行不通。

那么，有没有办法从该用户代理样式表中恢复值？不直接。但是，您可以只从默认样式表中复制样式。

all: unset; /* Reset */
/* ... */   /* Default styles */

select[data-reset] {
  /* Reset */
  all: unset;

  /* Default styles (on Firefox 41) */
  -moz-appearance: menulist;
  -moz-user-select: none;
  background-color: -moz-combobox;
  border-color: threedface;
  border-style: inset;
  border-width: 2px;
  box-sizing: border-box;
  color: -moz-comboboxtext;
  cursor: default;
  display: inline-block;
  font: ;
  line-height: normal !important;
  margin: 0;
  overflow: -moz-hidden-unscrollable;
  page-break-inside: avoid;
  text-align: start;
  text-indent: 0;
  text-shadow: none;
  white-space: nowrap !important;
  word-wrap: normal !important;
  writing-mode: horizontal-tb !important;
}

<select data-reset>
  <option>Option</option>
</select>
<select data-original>
  <option>Option</option>
</select>

但仍然存在一个问题:select 元素是替换元素，因此它们的表示超出了 CSS 的范围。然后，默认情况下，在 Firefox 上 select 看起来与内部样式表所说的有点不同。

为了更接近原来的样子，可以使用

border: 1px solid #7f9db9;
font: initial;
font-family: Tahoma;
font-size: 13.3333px;

所以完整的代码是

all: unset;
-moz-appearance: menulist;
-moz-user-select: none;
background-color: -moz-combobox;
border: 1px solid #7f9db9;
box-sizing: border-box;
color: -moz-comboboxtext;
cursor: default;
display: inline-block;
font: initial;
font-family: Tahoma;
font-size: 13.3333px;
line-height: normal !important;
margin: 0;
overflow: -moz-hidden-unscrollable;
page-break-inside: avoid;
text-align: start;
text-indent: 0;
text-shadow: none;
white-space: nowrap !important;
word-wrap: normal !important;
writing-mode: horizontal-tb !important;

select[data-reset] {
  all: unset;
  -moz-appearance: menulist;
  -moz-user-select: none;
  background-color: -moz-combobox;
  border: 1px solid #7f9db9;
  box-sizing: border-box;
  color: -moz-comboboxtext;
  cursor: default;
  display: inline-block;
  font: initial;
  font-family: Tahoma;
  font-size: 13.3333px;
  line-height: normal !important;
  margin: 0;
  overflow: -moz-hidden-unscrollable;
  page-break-inside: avoid;
  text-align: start;
  text-indent: 0;
  text-shadow: none;
  white-space: nowrap !important;
  word-wrap: normal !important;
  writing-mode: horizontal-tb !important;
}

<select data-reset>
  <option>Option</option>
</select>
<select data-original>
  <option>Option</option>
</select>