Change background color of active tabs

Question

Using Bootstrap v2.3.2, I am trying to change the default background color for the active tabs. I've tried to set as below, but it doesn't work:

.nav-tabs > .active > a,
.nav-tabs > .active > a:hover,
.nav-tabs > .active > a:focus
{
    color: #555555;
    background-color: red;  
} 

Any advice as to why this isn't working, or how to fix it?

Phytogenesis

Did you try the solution I posted? – Unseal

Answer 1

In the Bootstrap v2.3.2 CSS file, the CSS is as follows for your snippet:

        .nav-tabs > li.active > a,
        .nav-tabs > li.active > a:hover,
        .nav-tabs > li.active > a:focus {
          color: #555555;
          cursor: default;
          background-color: #ffffff;
          border: 1px solid #dddddd;
          border-bottom-color: transparent;
          } 

Compare this to your CSS snippet as you can see, you are missing the li selector before .active selector. Your CSS is correct however it does not work as the specificity in the Bootstrap CSS is more. So Just change your code snippet to by increasing specificity:

        .nav-tabs > li.active > a,
        .nav-tabs > li.active > a:hover,
        .nav-tabs > li.active > a:focus{
            color: #555555;
            background-color: red;  
        } 

Now your browser when it renders the page will choose your CSS snippet. You can see an example here: http://jsfiddle.net/yyPrg/

You can read up on CSS specificity here: http://css-tricks.com/specifics-on-css-specificity/ and here: http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

Unseal

Answer 2

In case of Bootstrap 3 and above, following css worked for me (no anchor tag):

ul.nav-tabs > li.active {
    background-color: #e9ecef;
    border: 1px #e9ecef;
    border-radius: .25rem;
    border-bottom-left-radius:0;
    border-bottom-right-radius:0;
}

Note: This also solves active tab highlight problem for ui-bootstrap plug-in's tab.

Mefford