使用内联或范围CSS恢复默认的Firefox <select>样式

Question

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

问题是:

a)我不知道默认的浏览器样式应该是什么样的,当没有设置样式时它看起来像它.当我在浏览器样式下查看Web检查器时,它是一个非常长的设置列表,看起来像是矫枉过正,只是为了覆盖两个样式表设置

b)我不想应用所有firefox特定的浏览器样式,最终打破其他浏览器的样式.

如何在不弄乱所有内容的情况下恢复默认值？

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

更新: 这是一个快速演示,说明问题和当前提出的答案的失败结果.这里还有一个小问题: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>

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

那么,有没有办法从该用户代理样式表中恢复值？不是直接的.但是,您只需从默认样式表中复制样式即可.

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>