CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Janath
Janath

Reputation: 1248

Override bootstrap !important

I just want to get rid of outline in my dropdown list when focus state. See this image

enter image description here

I tried to override bootstrap using !important but not working at all. Just check the dev tools and suddenly see this.

enter image description here

Bootstrap is also using !important tag. So I couldn't override it. I can use id to button and set focus outline to 0 but I have so many dropdowns in my website. Any fix for this kind of situation? 

.bootstrap-select .dropdown-toggle:focus{
   outline: none!important;
}

Upvotes: 6

Views: 9981

Answers (2)

Mostafa Ghanbari
Mostafa Ghanbari

Reputation: 374

Your style.css file loads before your Bootstrap css file. However, you have to load your style.css after the bootstrap-select.min.css file in order to override the Bootstrap styles.

CSS file priority

Upvotes: 7

josephting
josephting

Reputation: 2665

In your HTML, load style.css after you have loaded bootstrap-select.min.css.

In other words, load bootstrap-select.min.css first, then load style.css.

Within the same rule, the property that got defined later on will override the formerly defined property.

Upvotes: 2

Related Questions