Restore default Firefox <select> styling with inline or scoped CSS

Question

I'm working on a site with lots of (not so great) styling on the select element and I'd like to restore firefox defaults for one particular page. It seems to be primarily the background and border styles which are breaking firefox's rendering.

The problem is:

a) I have no idea what the default browser style should be to make it look like it does when no styles are set. When I look in the web inspector under browser styles it is a very long list of settings which would look like overkill just to override two stylesheet settings

b) I don't want to apply all the firefox specific browser styles and end up breaking styling on other browsers.

How do I get defaults back without messing everything up?

An acceptable answer can be either inline or scoped <style> element but the master stylesheet cannot be changed or omitted.

UPDATE: Here is a quick demo illustrating the problem and the failed results of currently proposed answers. There's also a jfiddle here: 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>

Answer 1

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 selects 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>