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>