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

By using the initial value, I can set an element's CSS property to its initial value as defined by the specification.

But in some cases, I want to set a CSS property to its initial user agent value instead.

For example, the appearance property of a select element varies based on what operating system you're using. Its default value is none, but most of the time it's then set to menulist by the user agent stylesheet, especially on a desktop browser.

So, if I want to set a select element back to its default user agent value, how would I do that? Ideally, I could just remove every rule that overrides it, but that's not always a practical option (for example, in a WordPress theme, or when using a third-party library).

Here's a visual example:

https://jsfiddle.net/xqy6zsfk/

A default select element

<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;
}

Solution

The way to set a property back to what is defined in the user agent stylesheet is to use the revert value.

MDN describes revert like this:

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.

The revert value is relatively new but is now fairly well supported. According to caniuse, over 96% of people use a web browser that supports it, making it somewhat ready for production on cutting-edge websites.

That said, if you need to support older browsers, you should make sure that your web page is still usable when the revert rule isn't active. You can do this by temporarily commenting it out or disabling it through the web browser's dev tools.