Restore Firefox default <select> style with inline or limited CSS
I'm working on a site with a lot (not so much) styling on a select element, and I'd like to restore the Firefox defaults for one specific page. It seems to be mostly styles background
and border
that break firefox rendering.
The problem is this:
a) I have no idea what the default browser style should look like to make it look as if none of the styles were set. When I look in a browser-style web inspector, it's a very long list of settings that would look like overkill to override the two stylesheet settings.
b) I don't want to apply all browser-specific styles and end up erasing the style in other browsers.
How do I get back to their defaults without loading everything?
The valid answer can be either inline or restricted <style>
, but the wizard's stylesheet cannot be modified or omitted.
UPDATE: Below is a brief demo of the problem and unfortunate results of the currently suggested answers. There is also: http://jsfiddle.net/pkd3byud/2/
select { margin: 10px 0; }
div select {
border: 2px solid tomato;
}
.oriol {
all: unset;
}
.boucher {
background: initial;
border: initial;
}
<select>
<option>Option</option>
</select>
<div>
<select>
<option>Option</option>
</select>
</div>
<div>
<select class="oriol">
<option>Option</option>
</select>
</div>
<div>
<select class="boucher">
<option>Option</option>
</select>
</div>
source to share
The only ways to prevent certain styles from being applied are:
- Removing these styles from the stylesheet
- Overriding them with the desired styles
Since you don't need the first way, it should be the second.
CSS3 introduces initial
both unset
keywords and all
shorthand property. So to undo 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, this will set the properties to their initial value . This initial value as defined in the specification is likely to be different from the default stylesheet used by browsers. So it won't work in practice.
Then, is there a way to restore the values from the 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: the elements select
are being replaced, so their presentation is outside the scope of CSS. Then, by default, Firefox select
displays slightly differently than what the internal stylesheet says.
To get closer to the original view, you can use
border: 1px solid #7f9db9;
font: initial;
font-family: Tahoma;
font-size: 13.3333px;
So the complete 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>
source to share