The only ways to prevent some styles from being applied are:
- Removing those styles from the stylesheet
- Overriding them with the desired styles
Since you don't want the first way, it must be the second.
CSS3 introduces the initial
and unset
keywords, and the all
shorthand property. So, to unset some styles, you can use
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>
However, that will set the properties to their initial value. That initial value, defined in the spec, will probably differ from the default stylesheet used by browsers. So it won't work in practice.
Then, is there a way to restore the values from that user agent stylesheet? Not directly. However, you can just copy the styles from the default stylesheet.
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>
But there is still a problem: select
elements are replaced elements, and therefore their representation is outside the scope of CSS. Then, by default, on Firefox select
s appear a bit different than what the internal stylesheet says.
To get closer to the original appearance, you can use
border: 1px solid #7f9db9;
font: initial;
font-family: Tahoma;
font-size: 13.3333px;
So the full code would be
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>