Return CSS style form element back to default browser style

Question

I want to have Firefox selectbox by default, but unfortunately I have a CSS instruction (which I cannot change or delete) that gives all the elements a selectbackground and border. This makes Firefox turn a good default control into an ugly square. Is there any way to remove / cancel these instructions?

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

I tried to overwrite these definitions with none, autoand inherit, but they did not have a fixed effect.

Answer 1

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;
}

, .

Answer 2

! important ?

Answer 3

Try:

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