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

i'm working on site lots of (not great) styling on select element , i'd restore firefox defaults 1 particular page. seems background , border styles breaking firefox's rendering.

the problem is:

a) have no idea default browser style should make when no styles set. when in web inspector under browser styles long list of settings overkill override 2 stylesheet settings

b) don't want apply firefox specific browser styles , end breaking styling on other browsers.

how defaults without messing up?

an acceptable answer can either inline or scoped <style> element master stylesheet cannot changed or omitted.

update: here quick demo illustrating problem , failed results of proposed answers. there's 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>

the ways prevent styles being applied are:

• removing styles stylesheet
• overriding them desired styles

since don't want first way, must second.

css3 introduces initial , unset keywords, , all shorthand property. so, unset styles, can use

background: unset; /* unset single property */ 

all: unset; /* unset 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, set properties initial value. initial value, defined in spec, differ default stylesheet used browsers. won't work in practice.

then, there way restore values user agent stylesheet? not directly. however, can copy styles 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 still problem: select elements replaced elements, , therefore representation outside scope of css. then, default, on firefox selects appear bit different internal stylesheet says.

to closer original appearance, can use

border: 1px solid #7f9db9; font: initial; font-family: tahoma; font-size: 13.3333px; 

so full code 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>