1

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);

}
Absolute_Nerd
  • 11
  • 3
  • `.btn:active` is not the same as `.btn.active` - the former is a pseudo-class (for the [active state of an element](https://developer.mozilla.org/en-US/docs/Web/CSS/:active)), whereas the latter is just a class. Which are you trying to target? – Tieson T. Aug 28 '18 at 02:42

2 Answers2

1

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

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
0

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.

Finesse
  • 9,793
  • 7
  • 62
  • 92