reverting a css styled form element back to default browser style

Question

I want to have a default Firefox selectbox, but unfortunately I have a css instruction (which i can not alter or remove) that gives all select elements a background and border. Which makes Firefox transform the nice default control to an ugly squared one. Is there a way to remove/revert those instructions?

select {
    background-color: white;
    border: 1px solid black;
}

I've tried to overwrite this definitions with none, auto and inherit, but they didn't have the indended effect.

Answer 1

Did you try adding the !important keyword to your overwriting styles?

Answer 2

Try:

select {
    background: none !important;
    border: 0 !important;
}

Answer 3

From forms.css, these are the default styles for Firefox:

select {
  margin: 0;
  border-color: ThreeDFace;
  background-color: -moz-Field;
  color: -moz-FieldText;
  font: -moz-list;
  line-height: normal !important;
  white-space: nowrap !important;
  text-align: start; 
  cursor: default;
  -moz-box-sizing: border-box;
  -moz-user-select: none;
  -moz-appearance: menulist;
  border-width: 2px;
  border-style: inset;
  text-indent: 0;
  overflow: -moz-hidden-unscrollable;
}

You could try re-specifying the relevant styles, however you may need to specify different property values for different browsers.