HTML & CSS Tab Bar - Changing the text color of the active tab

user_3426808 0
Viewed 76

I am using HTML to create a set of radio buttons with labels:

<input id="radio1" type="radio" name="css-tabs" checked>
<input id="radio2" type="radio" name="css-tabs">
<input id="radio3" type="radio" name="css-tabs">
<input id="radio4" type="radio" name="css-tabs">
<div id="tabs">
    <label id="tab1" for="radio1">Home</label>
    <label id="tab2" for="radio2">Services</label>
    <label id="tab3" for="radio3">Locations</label>
    <label id="tab4" for="radio4">Profile</label>
</div>

The active tab is blue with white text, but the inactive tabs are also white text, meaning the text can't be seen until they become active. I'm trying to make the text black when they're not highlighted but updating any of the labels doesn't seem to work.

Here is the CSS I'm using for the Tabs. Adding something as simple as color: #000000 isn't working. I'm probably just missing something but I can't pinpoint where.

input[name=css-tabs] {
  display: none;
}

a {
  color: #F29A77;
}

#tabDiv {
  background: #FFFFF;
  font-family: "Open Sans", "Arial";
}

#tabs {
  padding: 0 0 0 50px;
  width: calc(100% + 50px);
  margin-left: -50px;
  background: #FFFFF;
  height: 80px;
  border-bottom: 5px solid #2D9CCA;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
}

#tabs::before {
  content: "Test1";
  display: block;
  position: absolute;
  z-index: -100;
  width: 100%;
  left: 0;
  margin-top: 16px;
  height: 80px;
  background: #2B2A28;
  border-bottom: 5px solid #2D9CCA;
}

#tabs::after {
  content: "Test2";
  display: block;
  position: absolute;
  z-index: 0;
  height: 80px;
  width: 102px;
  background: #2D9CCA;
  transition: transform 400ms;
}

#tabs label {
  position: relative;
  z-index: 100;
  display: block;
  float: left;
  font-size: 11px;
  text-transform: uppercase;
  text-align: center;
  width: 100px;
  height: 100%;
  cursor: pointer;
  color: white;
}

#tabs label::before {
  content: "";
  display: block;
  height: 30px;
  width: 30px;
  z-index: -100;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  filter: invert(50%);
  margin: 10px auto;
  color: white;
}

#tab1::before {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/106891/paper-plane.png);
}

#tab2::before {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/106891/big-cloud.png);
}

#tab3::before {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/106891/folding-brochure.png);
}

#tab4::before {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/106891/mans-silhouette.png);
}

#radio1:checked~#tabs #tab1::before,
#radio2:checked~#tabs #tab2::before,
#radio3:checked~#tabs #tab3::before,
#radio4:checked~#tabs #tab4::before {
  filter: invert(100%);
}

#radio1:checked~#tabs::after {
  transform: translateX(0);
}

#radio2:checked~#tabs::after {
  transform: translateX(101px);
}

#radio3:checked~#tabs::after {
  transform: translateX(202px);
}

#radio4:checked~#tabs::after {
  transform: translateX(303px);
}
<input id="radio1" type="radio" name="css-tabs" checked>
<input id="radio2" type="radio" name="css-tabs">
<input id="radio3" type="radio" name="css-tabs">
<input id="radio4" type="radio" name="css-tabs">
<div id="tabs">
  <label id="tab1" for="radio1">Home</label>
  <label id="tab2" for="radio2">Services</label>
  <label id="tab3" for="radio3">Locations</label>
  <label id="tab4" for="radio4">Profile</label>
</div>

css html
1 Answers

As your elements are siblings, and you want to modify the children of one of them, I see two options:

To change the color of your text defined in ::after.

input[type="radio"] ~ #tabs::after {
  color: red;
}

This second option requires calling the element manually per id, as your elements with the number of the tab are children of #tabs, sibling of the radios.

#radio2:checked ~ #tabs #tab2 {
  color: red;
}

Otherwise, I'd suggest using JavaScript.

user_92399750
Related