Question

I am using Twitter bootstrap for the CSS of a page where I have input. Bootstrap defines:
border: 1px solid rgb(204, 204, 204);
background-color: rgb(255, 255, 255);
border-radius: 3px 3px 3px 3px;
for select elements.

I want to reset (by overwriting in my own CSS) these Bootstrap CSS property. I tried: auto, inherit, none. But none work. I also tried the -moz prefix for the radius. No success.

I see that this doesn’t work because in Firefox, a select that has NO border and NO border-style and NO background-color is rendered in a similar way with the webkit browsers.

You can check this by commenting out these rules in the Web Developer -> Inspect -> CSS view.

How can I do all this without touching the Bootstrap library?

Answer 1

The Bootstrap declarations have a higher specificity than yours.

You can test this by adding !important after the declaration: border: none !important

Do not ship with this code, however. To fix it the right way, use another class or id to override Bootstrap’s CSS.