<div >
<div >
<label for="tabs-tending-1">TRENDING <span>|<span></label>
<input id="tabs-tending-1" name="tabs-two" type="radio" checked="checked">
<div>
<p>content</p>
</div>
</div>
<div >
<label for="tabs-tending-2" >FAVOURITES</label>
<input id="tabs-tending-2" name="tabs-two" type="radio">
<div>
<p>content</p>
</div>
</div>
</div>I have a two tab list with inner tab content, here is both tabs text same color when switch, but I need active tab text color change that will be black and inactive tab text color will be grey, I have tried in css but not working looking same when switching, here is added html & css, please check. Thanks in advance
.tabs-tending {
display: block;
display: -webkit-flex;
display: -moz-flex;
display: flex;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
flex-wrap: wrap;
margin: 0;
overflow: hidden; }
.tabs-tending [class^="tab"] label,
.tabs-tending [class*=" tab"] label {
color: #000000;
cursor: pointer;
display: block;
font-size: 1.0em;
font-weight: 600;
line-height: 1em;
padding: 0.5rem 0;
text-align: center; }
.tabs-tending [class*=" tab"] label {
color: #000000;
cursor: pointer;
display: block;
font-size: 1.0em;
font-weight: 600;
line-height: 1em;
padding: 0.5rem 0;
text-align: center; }
.tabs-tending [class^="tab"] [type="radio"],
.tabs-tending [class*=" tab"] [type="radio"] {
/* border-bottom: 1px solid rgba(239, 237, 239, 0.5); */
cursor: pointer;
-webkit-appearance: media-slider;
-moz-appearance: media-slider;
appearance: media-slider;
display: block;
width: 100%;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out; }
.tabs-tending [class^="tab"] [type="radio"]:hover,
.tabs-tending [class^="tab"] [type="radio"]:focus,
.tabs-tending [class*=" tab"] [type="radio"]:hover,
.tabs-tending [class*=" tab"] [type="radio"]:focus {
/* border-bottom: 1px solid #ffc20e; */}
.tabs-tending [class^="tab"] [type="radio"]:checked,
.tabs-tending [class*=" tab"] [type="radio"]:checked {
/* border-bottom: 2px solid #009297; */ }
.tabs-tending [class^="tab"] [type="radio"]:checked div,
.tabs-tending [class*=" tab"] [type="radio"]:checked div {
opacity: 1; }
.tabs-tending [class^="tab"] [type="radio"] div,
.tabs-tending [class*=" tab"] [type="radio"] div {
display: block;
opacity: 0;
padding: 0rem 0;
width: 90%;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out; }
.tabs-tending .tabs-tending-2 {
width: 50%; }
.tabs-tending .tabs-tending-2 [type="radio"] div {
width: 200%;
margin-left: 200%; }
.tabs-tending .tabs-tending-2 [type="radio"]:checked div {
margin-left: 0; }
.tabs-tending .tabs-tending-2:last-child [type="radio"] div {
margin-left: 100%; }
.tabs-tending .tabs-tending-2:last-child [type="radio"]:checked div {
margin-left: -100%; }CodePudding user response：
I think if you change your styles to your class names it should work.
- When used together with the element, the for attribute specifies which form element a label is bound to.
Per: W3
This can be done using simple CSS.
.ten-mhead, .fav-mhead {
color: lightgrey;
padding: 5px;
cursor: pointer;
}
.ten-mhead:active, .fav-mhead:active {
color: black;
}<label for="tabs-tending-1">tab 1</label>
<label for="tabs-tending-2" >tab 2</label>CodePudding user response：
.tabs-tending {
display: block;
display: -webkit-flex;
display: -moz-flex;
display: flex;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
flex-wrap: wrap;
margin: 0;
overflow: hidden; }
.tabs-tending [class^="tab"] label,
.tabs-tending [class*=" tab"] label {
color: #000000;
cursor: pointer;
display: block;
font-size: 1.0em;
font-weight: 600;
line-height: 1em;
padding: 0.5rem 0;
text-align: center; }
.tabs-tending [class*=" tab"] label {
color: #000000;
cursor: pointer;
display: block;
font-size: 1.0em;
font-weight: 600;
line-height: 1em;
padding: 0.5rem 0;
text-align: center; }
.tabs-tending [class^="tab"] [type="radio"],
.tabs-tending [class*=" tab"] [type="radio"] {
/* border-bottom: 1px solid rgba(239, 237, 239, 0.5); */
cursor: pointer;
-webkit-appearance: media-slider;
-moz-appearance: media-slider;
appearance: media-slider;
display: block;
width: 100%;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out; }
.tabs-tending [class^="tab"] [type="radio"]:hover,
.tabs-tending [class^="tab"] [type="radio"]:focus,
.tabs-tending [class*=" tab"] [type="radio"]:hover,
.tabs-tending [class*=" tab"] [type="radio"]:focus {
/* border-bottom: 1px solid #ffc20e; */}
.tabs-tending [class^="tab"] [type="radio"]:checked,
.tabs-tending [class*=" tab"] [type="radio"]:checked {
/* border-bottom: 2px solid #009297; */ }
.tabs-tending [class^="tab"] [type="radio"]:checked div,
.tabs-tending [class*=" tab"] [type="radio"]:checked div {
opacity: 1; }
.tabs-tending [class^="tab"] [type="radio"] div,
.tabs-tending [class*=" tab"] [type="radio"] div {
display: block;
opacity: 0;
padding: 0rem 0;
width: 90%;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out; }
.tabs-tending .tabs-tending-2 {
width: 50%; }
.tabs-tending .tabs-tending-2 [type="radio"] div {
width: 200%;
margin-left: 200%; }
.tabs-tending .tabs-tending-2 [type="radio"]:checked div {
margin-left: 0; }
.tabs-tending .tabs-tending-2:last-child [type="radio"] div {
margin-left: 100%; }
.tabs-tending .tabs-tending-2:last-child [type="radio"]:checked div {
margin-left: -100%; }
.tabs-tending [class^="tab"] [type="radio"]:checked ~ label,
.tabs-tending [class*=" tab"] [type="radio"]:checked ~ label {
color: red }<div >
<div >
<input id="tabs-tending-1" name="tabs-two" type="radio" checked="checked">
<label for="tabs-tending-1">TRENDING <span>|<span></label>
<div>
<p>content</p>
</div>
</div>
<div >
<input id="tabs-tending-2" name="tabs-two" type="radio">
<label for="tabs-tending-2" >FAVOURITES</label>
<div>
<p>content</p>
</div>
</div>
</div>