如何将值设置为其默认用户代理值？

Question

通过使用 initial 值，我可以将元素的 CSS 属性设置为规范定义的初始值。

但在某些情况下，我想将 CSS 属性设置为其初始用户代理值。

例如，select 元素的 appearance 属性因您使用的操作系统而异。它的默认值是 none，但大多数时候它会被用户代理样式表设置为 menulist，尤其是在桌面浏览器上。

因此，如果我想将 select 元素设置回其默认用户代理值，我该怎么做？理想情况下，我可以删除所有覆盖它的规则，但这并不总是一个实用的选项（例如，在 WordPress 主题中，或在使用第三方库时）。

这是一个视觉示例：

默认 select 元素

<select id="select1">
<option>appearance: initial;</option>
<select>

<select id="select2">
<option>appearance: unset;</option>
<select>

<select id="select3">
<option>appearance: revert;</option>
<select>

<select id="select4">
<option>apperance: inherit;</option>
<select>

select
{
  display: block;
  margin-bottom: 20px;
  padding: 10px;
}

#select1
{
    -webkit-appearance: initial;
    -moz-appearance: initial;
    appearance: initial;
}

#select2
{
    -webkit-appearance: unset;
    -moz-appearance: unset;
    appearance: unset;
}

#select3
{
    -webkit-appearance: revert;
    -moz-appearance: revert;
    appearance: revert;
}

#select4
{
    -webkit-appearance: inherit;
    -moz-appearance: inherit;
    appearance: inherit;
}

Answer 1

将属性设置回用户代理样式表中定义的内容的方法是使用 revert 值。 MDN 上的还原描述如下：

it resets the property to its inherited value if it inherits from its parent or to the default value established by the user agent's stylesheet.

遗憾的是，对 revert 的支持尚未普及。根据 caniuse:

，截至 2020 年 1 月，这些是唯一支持它的浏览器

如何将值设置为其默认用户代理值？

How do I set a value to its default user agent value?

css

css-selectors

user-agent