I've been searching and exploring various solutions, but I'm encountering some difficulties with the following scenario: There are a few restrictions:
- Cannot utilize Javascript or Jquery.
- Must be achieved using pure CSS.
My objective is to change the background color of the label from Blue to Orange after the input is highlighted. Despite my efforts, the desired effect isn't being achieved. I've read through multiple suggestions, but none of them seem to work for me. I'm puzzled about where I might be going wrong.
Here's the CSS code snippet:
.header-tabs-container {
position: relative;
float: center;
left: 25%;
clear: both;
z-index: 2;
border-collapse: collapse;
white-space: normal;
border: unset;
}
.header-tabs-container .header-label {
position: relative;
padding: clamp(-1.5rem, -3.2rem + 8.8889vw, 3rem);
font-size: clamp(0.95rem, -0.925rem + 8.333vw, 3rem);
background-color: blue;
color: #fff;
cursor: pointer;
user-select: none;
text-align: center;
z-index: 1;
margin: 0px;
border: white 1px solid;
white-space: nowrap;
border-radius: 40px 40px 0px 0px;
}
.header-tabs-container .header-label:hover {
background: orange;
color: blue;
transition: 0.2s;
}
.header-tab-content {
position: relative;
background: #eee;
margin-top: -10px;
width: 100%;
min-height: 100vh;
padding: 0px;
float: left;
box-sizing: border-box;
z-index: 2;
display: none;
white-space: nowraπ.
border: 1px solid blue;
}
.header-tab-content:after {
content: "";
clear: both;
}
input[name="header-tab"] {
display: none;
}
input[name="header-tab"]:checked + .header-tab-content{display:block ;transition: ease-out;}
input[name="header-tab"]::after + .header-label{
background-color: orange;
}
The HTML code:
<section class="header-tabs-container">
<label class="header-label" for="header-tab1">Tab1</label><!-- --><label class="header-label" for="header-tab2">Tab2</label>
</section>
<input name="header-tab" id="header-tab1" type="radio" checked/>
<section class="header-tab-content">
<h3>Test</h3>
Content
</section>
<input name="header-tab" id="header-tab2" type="radio" />
<section class="header-tab-content">
<h3> test</h3>
content
</section>
</section>
Everything seems to be functioning correctly except for the specific problematic section that refuses to cooperate:
.
input[name="header-tab"]:checked + header-label {background-color:orange}
If you have any insights or guidance on this matter, I would greatly appreciate it!
Thank you in advance.