CODEWITHSUNDEEP
htmlcssfirefoxformsbrowser
naltatis
naltatis

Reputation: 3123

Reverting a CSS styled form element back to default browser style

I want to have a default Firefox selectbox, but unfortunately I have a CSS instruction (which I cannot 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.

Upvotes: 4

Views: 1893

Answers (3)

meder omuraliev
meder omuraliev

Reputation: 186662

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.

Upvotes: 2

eozzy
eozzy

Reputation: 68720

Try:

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

Upvotes: 0

Boris Callens
Boris Callens

Reputation: 93357

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

Upvotes: 0

Related Questions