CODEWITHSUNDEEP
htmlcssbootstrap-4
Absolute_Nerd
Absolute_Nerd

Reputation: 11

css active wont work only always default bootstrap active class will

I have tried everything to change the active background in CSS but the it only uses the default btn-primary boostrap active background.

 <button id="home" type="button" class="btn btn-primary active" 
href="#home">Home</button>

.btn:active, .btn:hover, .btn:target{
   background-color: rb(0, 0, 0, .7);

}

Upvotes: 1

Views: 51

Answers (2)

Carol Skelly
Carol Skelly

Reputation: 362380

That's because of CSS specificity.

The Bootstrap selector is .btn-primary:not(:disabled):not(.disabled).active, so to override it use the same, or a more specific selector...

.btn-primary:not(:disabled):not(.disabled).active {
    background-color: rgba(0, 0, 0, .7);
}

https://www.codeply.com/go/NrPynXwP01

There's no reason to use !important, and it's not a good practice.

Also see:
Customizing Bootstrap CSS template

Upvotes: 1

Finesse
Finesse

Reputation: 10801

Enforce your CSS selector to overcome the Bootstrap CSS selector. The easiest way to do it is to append !important:

.btn:active, .btn:hover, .btn:target {
  background-color: rgb(0, 0, 0, .7) !important;
}

You can read more about CSS Specificity (how browsers decide which of intersecting CSS rules to apply) here.

Upvotes: 0

Related Questions