CODEWITHSUNDEEP
htmlcss
mezt
mezt

Reputation: 89

Pure CSS tab menu active tab

I'm using this: http://webdesignerhut.com/create-pure-css-tabs/

And are looking for a way to make sure that the tabs are marked with another colour once active. Tried the following but without any success.

[id^=tab]:checked ~ [id^=label]  {
    background: #08C;
    color: white;
}

Upvotes: 0

Views: 269

Answers (2)

Dave Everitt
Dave Everitt

Reputation: 17876

Working CSS-only highlighted/hover tabs

I recently solved a similar issue, with more complete highlighting and hover. Here's a demo and the GitHub repo.

These CSS-only tabs also have optional JavaScript jump links within each tab’s content. Using naming/numbering conventions the code is scalable (as many or few tabs as you need, etc.).

Upvotes: 0

Anees
Anees

Reputation: 579

to make active on current tab, the following might be.

.tabs li.current {
    background: red;
    color: #fff;
  }

Upvotes: 3

Related Questions