Can't Select Another Radio Button When One Is Selected - html

Question

I'm using radio buttons to hack CSS-only tabs, but recently I've had a problem where when one radio button is selected, none of the others can be. When I hover over the label, it doesn't even change background color, like I specified in CSS.
Here's the relevant code:
<style>
.content-wrap{
display: none;
position: absolute;
top: 80px;
left: 0;
width: 100%;
height: calc(100% - 80px);
overflow-y: auto;
}
#main-wrap label{
display: block;
width: 48px;
height: 48px;
}
#main-wrap input[type=radio]{
}
#main-wrap [id^="tab"]:checked + label {
background-color: #404040;
}
#tab1:checked ~ #content-history,
#tab2:checked ~ #content-outline,
#tab3:checked ~ #content-edit,
#tab4:checked ~ #content-revise {
display: block;
}
</style>
<div id='main-wrap'>
<input type='radio' name='main-wrap' id='tab1' value=''><label for='tab1' class='metro-icon'>
<img src="https://maxcdn.icons8.com/windows10/PNG/64/Time_And_Date/hourglass-64.png" title="Hourglass" width="24">
</label>
<input type='radio' name='main-wrap' id='tab2' value=''>
<label for='tab2' class='metro-icon'><img src="https://maxcdn.icons8.com/windows10/PNG/64/Programming/outline-64.png" title="Outline" width="24">
</label>
<input type='radio' name='main-wrap' id='tab3' value=''>
<label for='tab3' class='metro-icon'><img src="https://maxcdn.icons8.com/windows10/PNG/64/Editing/pencil_tip-64.png" title="Pencil Tip" width="24">
</label>
<input type='radio' name='main-wrap' id='tab4' value=''>
<label for='tab4' class='metro-icon'><img src="https://maxcdn.icons8.com/windows10/PNG/64/Files/edit_file-64.png" title="Edit File" width="24">
</label>
<div class='content-wrap' id='content-history'>
<div class='main'>
<p>This is the history tab!</p>
</div>
</div>
<div class='content-wrap' id='content-outline'>
<div class='main'>
<p>This is the outline tab!</p>
</div>
</div>
<div class='content-wrap' id='content-edit'>
<div class='main'>
<div contenteditable id='main-input'>This is the edit tab!</div>
</div>
</div>
<div class='content-wrap' id='content-revise'>
<div class='main'>
<p>This is the revise tab!</p>
</div>
</div>
</div>
What am I missing?

Answer 1

Use this css:
#main-wrap input[type=radio]{
position:relative;
z-index:999;
}

Answer 2

The problem is that your .content-wrap is above the rest of radio buttons so you cannot press them.
Just remove height: calc(100% - 80px); and you will be able to mark the rest of radio buttons.
Also, change the left property because if not you are displaying the text above the second radio button so it will never be checked.
.content-wrap{
display: none;
position: absolute;
top: 80px;
left: 100px;
width: 100%;
overflow-y: auto;
}
#main-wrap label{
display: block;
width: 48px;
height: 48px;
}
#main-wrap input[type=radio]{
}
#main-wrap [id^="tab"]:checked + label {
background-color: #404040;
}
#tab1:checked ~ #content-history,
#tab2:checked ~ #content-outline,
#tab3:checked ~ #content-edit,
#tab4:checked ~ #content-revise {
display: block;
}
<div id='main-wrap'>
<input type='radio' name='main-wrap' id='tab1' value=''><label for='tab1' class='metro-icon'>
<img src="https://maxcdn.icons8.com/windows10/PNG/64/Time_And_Date/hourglass-64.png" title="Hourglass" width="24">
</label>
<input type='radio' name='main-wrap' id='tab2' value=''>
<label for='tab2' class='metro-icon'><img src="https://maxcdn.icons8.com/windows10/PNG/64/Programming/outline-64.png" title="Outline" width="24">
</label>
<input type='radio' name='main-wrap' id='tab3' value=''>
<label for='tab3' class='metro-icon'><img src="https://maxcdn.icons8.com/windows10/PNG/64/Editing/pencil_tip-64.png" title="Pencil Tip" width="24">
</label>
<input type='radio' name='main-wrap' id='tab4' value=''>
<label for='tab4' class='metro-icon'><img src="https://maxcdn.icons8.com/windows10/PNG/64/Files/edit_file-64.png" title="Edit File" width="24">
</label>
<div class='content-wrap' id='content-history'>
<div class='main'>
<p>This is the history tab!</p>
</div>
</div>
<div class='content-wrap' id='content-outline'>
<div class='main'>
<p>This is the outline tab!</p>
</div>
</div>
<div class='content-wrap' id='content-edit'>
<div class='main'>
<div contenteditable id='main-input'>This is the edit tab!</div>
</div>
</div>
<div class='content-wrap' id='content-revise'>
<div class='main'>
<p>This is the revise tab!</p>
</div>
</div>
</div>

Answer 3

please remove display: block from this style
#tab1:checked #content-history,
#tab2:checked ~ #content-outline,
#tab3:checked ~ #content-edit,
#tab4:checked ~ #content-revise {
display: block;
}

Answer 4

<style>
.content-wrap{
display: none;
position: absolute;
top: 80px;
left: 0;
width: 100%;
overflow-y: auto;
}
#main-wrap label{
display: block;
width: 40px;
height: 40px;
}
#main-wrap input[type=radio]{
}
#main-wrap [id^="tab"]:checked + label {
background-color: #404040;
}
#tab1:checked ~ #content-history,
#tab2:checked ~ #content-outline,
#tab3:checked ~ #content-edit,
#tab4:checked ~ #content-revise {
display: block;
}
</style>
<div id='main-wrap'>
<input type='radio' name='main-wrap' id='tab1' value=''><label for='tab1' class='metro-icon'>
<img src="https://maxcdn.icons8.com/windows10/PNG/64/Time_And_Date/hourglass-64.png" title="Hourglass" width="24">
</label>
<input type='radio' name='main-wrap' id='tab2' value=''>
<label for='tab2' class='metro-icon'><img src="https://maxcdn.icons8.com/windows10/PNG/64/Programming/outline-64.png" title="Outline" width="24">
</label>
<input type='radio' name='main-wrap' id='tab3' value=''>
<label for='tab3' class='metro-icon'><img src="https://maxcdn.icons8.com/windows10/PNG/64/Editing/pencil_tip-64.png" title="Pencil Tip" width="24">
</label>
<input type='radio' name='main-wrap' id='tab4' value=''>
<label for='tab4' class='metro-icon'><img src="https://maxcdn.icons8.com/windows10/PNG/64/Files/edit_file-64.png" title="Edit File" width="24">
</label>
<div class='content-wrap' id='content-history'>
<div class='main'>
<p>This is the history tab!</p>
</div>
</div>
<div class='content-wrap' id='content-outline'>
<div class='main'>
<p>This is the outline tab!</p>
</div>
</div>
<div class='content-wrap' id='content-edit'>
<div class='main'>
<div contenteditable id='main-input'>This is the edit tab!</div>
</div>
</div>
<div class='content-wrap' id='content-revise'>
<div class='main'>
<p>This is the revise tab!</p>
</div>
</div>
</div>
Check this