Menu icon Foundation
Customize foundation 6 tab background color

I'm working with Foundation 6's Tabs: http://foundation.zurb.com/sites/docs/tabs.html

I'm trying to find a way to change the "active" tab background color within the specific web page I'm designing, without having to change the active tab background in the Foundation css app.

My usual trick is to pull up the page, inspect the element I want to change, and then create a custom version of the element's styles. I'm struggling to find the class for the active tab though. If someone could let me know what that class is, that would be great. Even greater if you show me how to find it so I can figure these things out myself next time.

If though the active tab background color is not set via a class, but via some other wizardry, is there another way to set this color via the html or css file?

custom active tabfoundation 6

I'm working with Foundation 6's Tabs: http://foundation.zurb.com/sites/docs/tabs.html

I'm trying to find a way to change the "active" tab background color within the specific web page I'm designing, without having to change the active tab background in the Foundation css app.

My usual trick is to pull up the page, inspect the element I want to change, and then create a custom version of the element's styles. I'm struggling to find the class for the active tab though. If someone could let me know what that class is, that would be great. Even greater if you show me how to find it so I can figure these things out myself next time.

If though the active tab background color is not set via a class, but via some other wizardry, is there another way to set this color via the html or css file?

Roy Six about 2 years ago

Hi,

You may be having trouble finding it because Foundation defines the active tab background color via a child element's attribute, not the parent element's class (e.g. is-active). Inspecting Tab 1's li inner HTML, shows an anchor element that has an aria attribute aria-selected='true'. We can then see CSS that applies a background and color based on this attribute (highlighted in yellow).

So, if you wanted to completely override the Foundation CSS tab color, this is the part you'd want to override:

CSS

 

.tabs-title > a:focus, .tabs-title > a[aria-selected='true'] {
    background: #e6e6e6;
    color: #1779ba;
}

 

If you don't want to completely override the default Foundation values, but you just want to add your own "custom" tabs class, you can follow this HTML and CSS example that adds in a class called custom to the parent tabs ul element:

HTML

 

<ul class="custom tabs" data-tabs id="example-tabs">
  <li class="tabs-title is-active"><a href="#panel1" aria-selected="true">Tab 1</a></li>
  <li class="tabs-title"><a data-tabs-target="#panel2" href="#panel2">Tab 2</a></li>
</ul>

CSS

 

.custom.tabs > .tabs-title > a:focus, .custom.tabs > .tabs-title > a[aria-selected='true'] {
    background: black;
    color: white;
}

 

Hope this helps.