When utilizing the initial value, I have the ability to designate an element's CSS property to its initial value per the specification.
However, there are instances where I may prefer to set a CSS property to its initial user agent value instead.
For instance, the appearance property of a select element can differ based on the operating system being used. While its default value is none, it is commonly changed to menulist by the user agent stylesheet, particularly in desktop browsers.
So, if I wish to revert a select element to its default user agent value, how can this be achieved? Ideally, I would simply remove any overriding rules, but this may not always be feasible (such as in a WordPress theme or when utilizing a third-party library).
For a visual representation, refer to the example below:
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;
}