What is causing the radio button's background color not to change after it is selected?

I've been searching and exploring various solutions, but I'm encountering some difficulties with the following scenario: There are a few restrictions:

  1. Cannot utilize Javascript or Jquery.
  2. 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.

Answer №1

To style the tabs in CSS, you will need to adjust the position and appearance of the input element along with using the ~ selector for sibling content selection:

.header-tabs-container {
        position: relative;
        float: center;
/*            left: 25%;*/
        clear: both;
        z-index: 2;
        border-collapse: collapse;
        white-space: normal;
        border: unset;
    }
    /* tabs names */
    .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;
    }
    
    /* Hover effect on tabs names */
    .header-tabs-container .header-label:hover {
        background: orange;
        color: blue;
        transition: 0.2s;
    }
    
    /* Content area for tabs */
    .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: nowrap;
        border: 1px solid blue;
    }
    
    .header-tab-content:after {
        content: "";
        clear: both;
    }
    /* Hide input radio from users */
    input[name="header-tab"] {
        display: none;
    }
    /* Show tab when input checked */
    input[name="header-tab"]:nth-of-type(1):checked ~ .header-tab-content:nth-of-type(1),
    input[name="header-tab"]:nth-of-type(2):checked ~ .header-tab-content:nth-of-type(2) {
        display: block;
        transition: 0.5s ease-out;
    }
    
    input[name="header-tab"]:checked + .header-label {
        background-color: orange;
    }
<section class="header-tabs-container">
      <input name="header-tab" id="header-tab1" type="radio" checked/>
        <label class="header-label" for="header-tab1">Tab1</label>
      <input name="header-tab" id="header-tab2" type="radio" />
        <label class="header-label" for="header-tab2">Tab2</label>
    
      <section class="header-tab-content">
        <h3>Test</h3>
           Content 
        </section>
    
      <section class="header-tab-content">
          <h3> test</h3>
          content
        </section>
    
    </section>

Answer №2

When using the + combinator in CSS selectors, it will only match the second element if it immediately follows the first element. Learn more about CSS Selectors here

To experiment with this concept, try moving the labels and inputs inside the same section and then use the ~ or + combinators. Remember that the input must come first in the sequence.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble with the functionality of a simple jQuery toggle menu on mobile?

I am experiencing an issue with a simple toggle menu that utilizes jQuery's on: tap feature, but it is not functioning as expected: <nav id="mobile-nav"> <ul> <li>Item 1</li> <li>Item 2</li> ...

Assign the value from the list to a variable in order to execute an API call

Imagine a scenario where there's a button that displays a random joke based on a specific category. The categories are fetched using an API request from https://api.chucknorris.io/jokes/categories The jokes are generated from https://api.chucknorris. ...

How can I make columns with a max-width expand fluidly?

I am currently using a fluid/responsive column layout that looks like this: .row{ float:left; max-width:960px; width:100%; } .column{ float:left; margin:0 15px; } .column:first-child{ margin-left:0; } .column:last-child{ mar ...

The Ng-include tag does not provide highlighting for its text

Within an ng-include template, I have a div that is not highlighting when hovered over. Although the cursor changes to a pointer when hovering over the text, attempting to click and drag to highlight it results in nothing happening. This issue is signific ...

Adjusting the array when items in the multi-select dropdown are changed (selected or unselected)

I am looking to create a multi-select dropdown in Angular where the selected values are displayed as chip tags. Users should be able to unselect a value by clicking on the 'X' sign next to the chip tag, removing it from the selection. <searcha ...

Select the fourth element in a list using CSS

Is it possible to style the fourth child differently using the ">" selector like so: .thisclass > ul > li > ul > li { color: blue; } I am working with WordPress and trying to avoid creating additional CSS classes. Is there a way to apply s ...

Sending JSON Data from C# to External JavaScript File without Using a Web Server

Trying to transfer JSON data from a C# (winforms) application to a static HTML/JavaScript file for canvas drawing without the need for a web server. Keeping the HTML file unhosted is preferred. Without involving a server, passing data through 'get&ap ...

Other elements are unable to conceal Material UI InputBase

Displayed below is a navigation bar that sticks to the top, followed by rows of InputBase components from material-ui. Despite setting the background color of the nav bar to white, the input always appears above the nav. This strange behavior stopped when ...

Is it possible to have the website show up at a default size of 90% on the display

My preference is for my website to appear at 90% instead of 100%. This seems to be a common occurrence for me. Is there a way to have it default to this appearance? ...

Load images in advance using jQuery to ensure they are cached and retrieve their original sizes before other activities can proceed

When a user clicks on a thumbnail, I aim to display the full-size image in a div. To achieve this, I want to determine the original size of the image based on its source URL before it loads, allowing me to set the appropriate dimensions for the container. ...

The issue of double submission persists, with the prevention of the default action

I'm in need of assistance. Within my form, I have two buttons displayed on the page: "Save" and "Publish". Below is the corresponding HTML code: <button type="submit" class="button">Save</button> <button type="button" class="button" n ...

Certain components display with greater height on Internet Explorer

When viewing my website in Internet Explorer, I noticed that some elements appear taller compared to other browsers. After investigating further, I discovered that all these elements contained SVG images. It seems like they have a fixed height even though ...

How can I eliminate the spacing in CSS?

Seeking assistance to eliminate the extra space above the navbar. Can someone guide me through this? Here is my HTML code for reference: And here is my CSS code: ...

Issue with toggling JS checkboxes selection

Seeking assistance in expanding my knowledge of Javascript. I have a form with checkboxes and a JavaScript function that allows toggling between selecting and deselecting all the boxes. Everything is functioning as intended so far. The challenge arises f ...

Angular 8 dropdown menu that closes when clicking outside of it

Hello, I am currently using the click function on the p tag. When a user opens the dropdown menu, I want to close it when they click outside of it in Angular. Here is the HTML code: <div class="select_cat"> <p class="cat_name" (click)="openC ...

Loading images in advance before webpage loads

Welcome friends! This is my first time asking a question here, so I hope I'm doing it right :) I'm looking to preload 3 images before the webpage fully loads so that they all appear simultaneously. Currently, the images load one after another and ...

What is the method used by React or Next to prevent the <a> tag from refreshing the page while still loading content?

I'm currently diving into the world of NextJS and utilizing the Link component from the 'next/link' package. One thing that has been puzzling me is how the <Link> component ultimately renders an <a> tag with a href='/tosomew ...

Is there a way to navigate through div text within a stationary container?

My current challenge involves a container that contains an overflow of text, but I desire for the container to remain fixed. The dilemma arises when the text spills out from both the top and bottom edges of the container. Instead of using scroll bars withi ...

How can I achieve a transparent background for a text field in CSS instead of white?

I've come across several solutions, but none have been able to solve my issue so far. The text fields in question look like this: .form-wrapper .field-list .field .field-element{ background-color: rgba(0,0,0,0.5); color: rgba(255,255 ...

Tips for implementing a "read more" feature for lengthy descriptions in Django?

In the Django platform using Python, I am working on displaying results in a template file with a large description. I am seeking guidance on how to implement a "see more" option for descriptions that exceed 4 lines. Similar to Facebook's long status ...