Customizing a Tab Bar with HTML and CSS - Adjusting the text color for the selected tab

When creating a set of radio buttons with labels using HTML, the challenge arises when the active tab appears in blue with white text while the inactive tabs have the same white text making them invisible until highlighted. The goal is to change the color of the text to black on inactive tabs, but updating the labels doesn't seem to work as expected.

The provided CSS for the Tabs seems to be missing something crucial that could address this issue. Despite attempts like adding color: #000000, the desired result is not achieved. There might be an oversight in the implementation.

<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>

Answer №1

Since your elements are positioned as siblings, and you wish to make changes to the children of one of them, there are two potential solutions:

You can adjust the text color defined in ::after.

input[type="checkbox"] ~ #tabs::after {
  color: blue;
}

The second option involves selecting the element by its ID manually, since the tabs corresponding to the radio buttons are nestled under #tabs, which is a sibling of the radios.

#radio3:checked ~ #tabs #tab3 {
  color: blue;
}

If these approaches don't work, it may be worth considering implementing JavaScript.

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

What causes background-color to create gaps of white space?

How can I remove the white spaces on the right and left side of a section when applying a background-color? https://i.sstatic.net/WbVuv.png I want the background-color to fill out the entire width of the section. Should I use extra padding to solve this ...

Ensure that the z-index of the div element is properly set

Here's the HTML code I'm working with: <div class="caption_center"> <h1 class="caption_header font-alpha">Making Your World More Comfortable</h1> <p class="caption_regular font-alpha">Let us convince you of that&l ...

Large header picture

Instead of tiptoeing around the issue, let me just be blunt and ask: I'm curious about how they created this image header. Even after removing all javascript code and css using Chrome's property inspector, the image continued to stretch. The sty ...

Using JSON and Ajax to dynamically append and generate a new Div element

I am currently working on an HTML page where most of its components are static and loaded from JSON files. My goal is to create "posts" and attach "comments" to them. I have two JSON files for this purpose: posts.JSON and comments.JSON. The posts.JSON fi ...

Where do JQuery and framesets vanish to?

Whenever I attempt to use the console to create an element with the tag frameset, it returns no result: $('<div id="content" data-something="hello" />') => [<div id=​"content" data-something=​"hello">​</div>​] $(&apo ...

What is the best way to make a dropdown button on a top navigation bar show as active using Semantic-ui?

I searched through the Semantic-ui documentation, but I couldn't find clear instructions on how to designate a dropdown item as 'active' (highlighted without being opened) in my top navbar menu, similar to regular items. The 'active&ap ...

Does the utilization of setTimeout(function, 100) have an impact on performance?

I have implemented a function that continuously checks if the URL contains any of the navigation hrefs every 100ms. If it finds a match, specific elements are assigned the class active. Here's the code snippet: var checkActive = function(){ ...

Delete an entry from the list

I have a fully functional Ajax call and function that fills up a datalist. This datalist is utilized to choose from a limited list and add it to a UL element on the page. Once an option is added from the datalist to the actual list, I aim to eliminate that ...

Aligning the initial item to the left and the rest to the right in a list using flexbox styling

I've been working hard to troubleshoot the header on my personal webpage. As it stands now, here is how it looks: https://i.sstatic.net/C4zSQ.png Currently, there's a simple paragraph with "ZH" on the left and three list items next to the logo. ...

Is it possible to transform PDF files into HTML on an iOS device?

Task : Transforming a pdf file into an HTML file For example: We have a pdf file available at the link below that needs to be converted to an HTML file. Research : I searched online and discovered several methods to convert HTML to PDF such as Convert ...

The foundation gem is encountering an issue with incompatible units: 'rem' and 'px'

After installing the foundation gem version 5.5.2.1, I encountered an error when starting the application: Showing /home/user/Scrivania/sites/store/app/views/layouts/application.html.erb where line #9 raised: Incompatible units: 'rem' and &apos ...

Is there a CSS workaround for the "not" statement? Perhaps an alternative method like superfish?

I've searched online for a solution but haven't found one yet. I'm currently using the superfish dropdown menu and I want to round the top li items, excluding those with ul's inside. You can see a demo on this test page: Check out the ...

What is the proper way to call a function in an HTML document?

I'm currently working on an HTML file that displays the coordinates provided by the user on a map. Every time I try to submit the form, I encounter an error saying "UncaughtReferenceError: NewMap is not defined." I've attempted using both externa ...

Create a full-width slider using Materialize CSS framework

When using materializecss to create a slider, I encountered an issue where the image is full width but not full height, causing scrollbars to appear. What changes can I make to ensure the slider fills out my screen without any scrollbars? Additionally, I ...

PHP form - The issue with validation not functioning properly

I'm having trouble validating a simple PHP form with HTML code and it's not working as expected. Here is the HTML code: <form action="expresscontactform.php" method="post" name="form1" id="form1"> <label>Name </label>< ...

Responsive grid made with HTML and CSS to create dynamic DIVs

Currently, I am working on a project that requires a responsive page layout using divs. The layout should resemble a grid, with 3 columns that reorganize into 2 columns on smaller screens. Here is the basic HTML structure I have so far: <div id="main" ...

Execute Jquery ajax only on the initial invocation

When I am using ajax post in jQuery to build a portion of a page, I am encountering an issue where it only runs once. Below is the code snippet I am working with: <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery ...

The footer is not expanding to fill the entire width of the page

My footer is giving me trouble by not stretching to the full width on one specific page out of eight. This issue arose after I added an administration menu. Any assistance would be greatly appreciated. HTML: <div id="administraceMenu"> <ul clas ...

Dynamic resizing of DIVS occurs when the address bar is hidden on Mobile Chrome

As I work on designing a website, I have utilized sections with the same class and set their height to 100vh. Everything appears to be functioning correctly when viewed on a browser, however, issues arise when accessing the site on phones. Whenever I scro ...

Switching between various dropdown options does not produce any noticeable differences in the (React) interface

I am experiencing an issue with my dropdown menu where selecting different values no longer triggers any changes. This was working perfectly fine before. Below is the code I am using: context.js: import React, { useState, useEffect } from 'react&apo ...