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

Question

通过使用

initial

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

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

例如，

appearance

元素的

select

属性因您使用的操作系统而异。它的默认值是

none

，但大多数时候它会被用户代理样式表设置为

menulist

，尤其是在桌面浏览器上。

所以，如果我想将

select

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

这是一个视觉示例：

https://jsfiddle.net/xqy6zsfk/

默认选择元素

<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 是这样描述

revert

的：

如果属性是从其父级继承的，它会将属性重置为其继承值，或者重置为用户代理样式表建立的默认值。

revert

值相对较新，但现在得到了很好的支持。根据 caniuse 的说法，超过 93% 的人使用支持它的网络浏览器，这使得它在一定程度上为尖端网站的生产做好了准备。

就是说，如果您需要支持旧版浏览器，您应该确保您的网页在

revert

规则未激活时仍然可用。您可以通过网络浏览器的开发工具暂时将其注释掉或禁用它来执行此操作。