Is there a way to reset the border, border-radius, and background-color CSS properties?

css, twitter-bootstrap

Solution

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.

Problem

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?

Original source