9
votes

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?

4
As far as I know, there's no "reset" property in CSS. When you need that, you have to "reset" those properties in a way that you nullify those that you don't want.rafaelbiten

4 Answers

8
votes

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.

10
votes
-webkit-border-radius: 0;
-moz-border-radius: 0;
-o-border-radius: 0;
border-radius: 0;
border: 0;

That should reset the borders. As long as your preferred styles appear later than the ones provided by Bootstrap, they will take precedence. Also, -moz-appearance may help you override default Firefox appearances (or reset them).

2
votes

To reset properties, use value "initial", works on all properties:

-webkit-border-radius: initial;
-moz-border-radius: initial;
-o-border-radius: initial;
border-radius: initial;
border: initial;
-1
votes

Did you try !important its not always a good solution but may be the reason you are experiencing problems, read more about when it might be good to user this method here.