I have created a set of radio buttons to allow users to provide a response to a set questions. The HTML I have set works perfectly on a fresh html page but when placed inside the intended container they become unresponsive and un-clickable. I am assuming this is because there is a conflict with the radio buttons being place inside a container that is attached to tabs controlled by a css only radio button hack. The tabs work amazing using radio button selectors.
The HTML alone works so i know the problem is in my CSS file.
Anyone any idea how to work around this conflict?
Here is my code...
:root {
--primary: #0162a4;
--primary_med: #5084a7;
--primary_dark: #113255;
--light: #ffffff;
--dark: #000000;
--shadow: 2px 4px 8px rgba(104, 104, 104, 0.8);
--shadow-white: 0px 11px 8px -10px rgba(255, 255, 255, 0.678), 0px -11px 8px -10px rgba(255, 255, 255, 0.678);
--overlay: rgb(255, 255, 255, 0.15);
--overlay-blk: rgba(0, 0, 0, 0.15);
--gradient: linear-gradient(to bottom right, #113255, #0162a4);
}
@font-face {
font-family: 'walkway';
src: url('/static/fonts/Walkway_Bold-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'walkway';
src: url('/static/fonts/Walkway_Black-webfont.woff') format('woff');
font-weight: bold;
font-style: normal;
}
.container {
width: 500px;
}
.container {
padding-left: 10px;
}
.tabs {
position: relative;
margin: 0;
}
.tabs::before,
.tabs::after {
content: "";
display: table;
}
.tabs::after {
clear: both;
}
.tab {
width:110px;
float: left;
padding-right: 6px;
Padding-top: 1px;
}
.tab-switch {
display: none;
}
.tab-label {
font-family: 'walkway';
font-weight: bold;
position: relative;
display: block;
height: 32px;
text-align: center;
background: var(--primary_dark);
color: #fff;
cursor: pointer;
padding: 5px;
font-size: 14px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
.tab-switch:checked+.tab-label {
color: var(--light);
border-bottom: 0;
z-index: 2;
top: -0.0625rem;
font-size: 16px;
font-weight: 700;
}
.tab-content {
height: 12rem;
position: absolute;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
border: 1px solid;
border-color: #6386b6;
z-index: 1;
top: 31px;
left: 0;
background-image: linear-gradient(to bottom right, rgb(58, 82, 112), rgb(65, 117, 167));
opacity: 0;
height: 343px;
width: 100%;
padding: 20px;
gap: 20px;
display: grid;
grid-template-areas:
'question-1 rating1'
'question-2 rating2'
'question-3 rating3'
'question-4 rating4'
'question-5 rating5';
grid-template-columns: 330px 140px;
grid-template-rows: 44.6px 44.6px 44.6px 44.6px 44.6px;
}
.question-1 {grid-area: question-1;}
.question-2 {grid-area: question-2;}
.question-3 {grid-area: question-3;}
.question-4 {grid-area: question-4;}
.question-5 {grid-area: question-5;}
.rating1 {grid-area: rating1;}
.rating2 {grid-area: rating2;}
.rating3 {grid-area: rating3;}
.rating4 {grid-area: rating4;}
.rating5 {grid-area: rating5;}
.question-1, .question-2, .question-3, .question-4, .question-5 {
background-color: rgb(255, 255, 255, 0.85);
border-radius: 25px;
border: 1px solid;
border-color:rgb(0, 0, 0);
text-align: center;
display: flex;
justify-content: center;
align-items: center;
font-family: 'walkway';
font-weight: bold;
text-align: center;
}
.tab:first-child .tab-switch:checked+.tab-label {
background-image: linear-gradient(to bottom right, rgb(59, 81, 110), rgb(62, 84, 117));
border: 1px solid;
border-bottom: 0px;
border-color: #6386b6;
}
.tab:nth-child(2) .tab-switch:checked+.tab-label {
background-image: linear-gradient(to bottom right, rgb(64, 91, 122), rgb(63, 88, 123));
border: 1px solid;
border-bottom: 0px;
border-color: #6386b6;
}
.tab:nth-child(3) .tab-switch:checked+.tab-label {
background-image: linear-gradient(to bottom right, rgb(61, 91, 127), rgb(64, 92, 128));
border: 1px solid;
border-bottom: 0px;
border-color: #6386b6;
}
.tab:last-child .tab-switch:checked+.tab-label {
background-image: linear-gradient(to bottom right, rgb(61, 94, 132), rgb(66, 96, 135));
border: 1px solid;
border-bottom: 0px;
border-color: #6386b6;
}
.tab-switch:checked+label+.tab-content {
z-index: 1;
opacity: 1;
}
.tab:not(:first-child) .tab-switch:checked+label+.tab-content {
border-top-left-radius: 8px;
} <div class="container">
<div class="tabs">
<div class="tab">
<input type="radio" name="css-tabs" id="tab-1" checked class="tab-switch">
<label for="tab-1" class="tab-label">Rate it</label>
<div class="tab-content">
<div class="question-1">
<label>Question 1</label>
</div>
<div class="question-2">
<label>Question 2</label>
</div>
<div class="question-3">
<label>Question 3</label>
</div>
<div class="question-4">
<label>Question 4</label>
</div>
<div class="question-5">
<label>Question 5</label>
</div>
<div class="rating1">
<div class="rating">
<input type="radio" name="star1" id="rad-1"><label for="rad-1">
</label>
<input type="radio" name="star1" id="rad-2"><label for="rad-2">
</label>
<input type="radio" name="star1" id="rad-3"><label for="rad-3">
</label>
<input type="radio" name="star1" id="rad-4"><label for="rad-4">
</label>
<input type="radio" name="star1" id="rad-5"><label for="rad-5">
</label>
</div>
</div>
<div class="rating2">
<div class="rating">
<input type="radio" name="star2" id="rad-6"><label for="rad-6">
</label>
<input type="radio" name="star2" id="rad-7"><label for="rad-7">
</label>
<input type="radio" name="star2" id="rad-8"><label for="rad-8">
</label>
<input type="radio" name="star2" id="rad-9"><label for="rad-9">
</label>
<input type="radio" name="star2" id="rad-10"><label for="rad-10">
</label>
</div>
</div>
<div class="rating3">
<div class="rating">
<input type="radio" name="star3" id="rad-11"><label for="rad-11">
</label>
<input type="radio" name="star3" id="rad-12"><label for="rad-12">
</label>
<input type="radio" name="star3" id="rad-13"><label for="rad-13">
</label>
<input type="radio" name="star3" id="rad-14"><label for="rad-14">
</label>
<input type="radio" name="star3" id="rad-15"><label for="rad-15">
</label>
</div>
</div>
<div class="rating4">
<div class="rating">
<input type="radio" name="star4" id="rad-16"><label for="rad-16">
</label>
<input type="radio" name="star4" id="rad-17"><label for="rad-17">
</label>
<input type="radio" name="star4" id="rad-18"><label for="rad-18">
</label>
<input type="radio" name="star4" id="rad-19"><label for="rad-19">
</label>
<input type="radio" name="star4" id="rad-0"><label for="rad-20">
</label>
</div>
</div>
<div class="rating5">
<div class="rating">
<input type="radio" name="star5" id="rad-21"><label for="rad-21">
</label>
<input type="radio" name="star5" id="rad-22"><label for="rad-22">
</label>
<input type="radio" name="star5" id="rad-23"><label for="rad-23">
</label>
<input type="radio" name="star5" id="rad-24"><label for="rad-24">
</label>
<input type="radio" name="star5" id="rad-25"><label for="rad-25">
</label>
</div>
</div>
</div>
</div>
<div class="tab">
<input type="radio" name="css-tabs" id="tab-2" class="tab-switch">
<label for="tab-2" class="tab-label">Buzz it</label>
<div class="tab-content"> </div>
</div>
<div class="tab">
<input type="radio" name="css-tabs" id="tab-3" class="tab-switch">
<label for="tab-3" class="tab-label">Vibe it</label>
<div class="tab-content"> </div>
</div>
<div class="tab">
<input type="radio" name="css-tabs" id="tab-4" class="tab-switch">
<label for="tab-4" class="tab-label">Review it</label>
<div class="tab-content"> </div>
</div>
</div>
</div>The solution to your problem is actually quite simple:
in CSS rule .tab-content { .. } change z-index: 1 to z-index: 0, setting it to the default rendering layer.
As this means the browser treats it as if z-index was not set at all, it is essentially obsolete. I left it in place to show what your bug was, but as alternative option, you can safely remove z-index: 1 entirely for the code to work properly.
You might want to do some research on Using z-index and the The stacking context (both on MDN).
The code, with disabled rule on CSS line 97 (or search for DISABLED)
:root {
--primary: #0162a4;
--primary_med: #5084a7;
--primary_dark: #113255;
--light: #ffffff;
--dark: #000000;
--shadow: 2px 4px 8px rgba(104, 104, 104, 0.8);
--shadow-white: 0px 11px 8px -10px rgba(255, 255, 255, 0.678),
0px -11px 8px -10px rgba(255, 255, 255, 0.678);
--overlay: rgb(255, 255, 255, 0.15);
--overlay-blk: rgba(0, 0, 0, 0.15);
--gradient: linear-gradient(to bottom right, #113255, #0162a4);
}
@font-face {
font-family: "walkway";
src: url("/static/fonts/Walkway_Bold-webfont.woff") format("woff");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "walkway";
src: url("/static/fonts/Walkway_Black-webfont.woff") format("woff");
font-weight: bold;
font-style: normal;
}
.container {
width: 500px;
}
.container {
padding-left: 10px;
}
.tabs {
position: relative;
margin: 0;
}
.tabs::before,
.tabs::after {
content: "";
display: table;
}
.tabs::after {
clear: both;
}
.tab {
width: 110px;
float: left;
padding-right: 6px;
padding-top: 1px;
}
.tab-switch {
display: none;
}
.tab-label {
font-family: "walkway";
font-weight: bold;
position: relative;
display: block;
height: 32px;
text-align: center;
background: var(--primary_dark);
color: #fff;
cursor: pointer;
padding: 5px;
font-size: 14px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
.tab-switch:checked + .tab-label {
color: var(--light);
border-bottom: 0;
z-index: 2;
top: -0.0625rem;
font-size: 16px;
font-weight: 700;
}
.tab-content {
height: 12rem;
position: absolute;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
border: 1px solid;
border-color: #6386b6;
/* z-index: 0; /* DISABLED, was z-index: 1 */
top: 31px;
left: 0;
background-image: linear-gradient(
to bottom right,
rgb(58, 82, 112),
rgb(65, 117, 167)
);
opacity: 0;
height: 343px;
width: 100%;
padding: 20px;
gap: 20px;
display: grid;
grid-template-areas:
"question-1 rating1"
"question-2 rating2"
"question-3 rating3"
"question-4 rating4"
"question-5 rating5";
grid-template-columns: 330px 140px;
grid-template-rows: 44.6px 44.6px 44.6px 44.6px 44.6px;
}
.question-1 {
grid-area: question-1;
}
.question-2 {
grid-area: question-2;
}
.question-3 {
grid-area: question-3;
}
.question-4 {
grid-area: question-4;
}
.question-5 {
grid-area: question-5;
}
.rating1 {
grid-area: rating1;
}
.rating2 {
grid-area: rating2;
}
.rating3 {
grid-area: rating3;
}
.rating4 {
grid-area: rating4;
}
.rating5 {
grid-area: rating5;
}
.question-1,
.question-2,
.question-3,
.question-4,
.question-5 {
background-color: rgb(255, 255, 255, 0.85);
border-radius: 25px;
border: 1px solid;
border-color: rgb(0, 0, 0);
text-align: center;
display: flex;
justify-content: center;
align-items: center;
font-family: "walkway";
font-weight: bold;
text-align: center;
}
.tab:first-child .tab-switch:checked + .tab-label {
background-image: linear-gradient(
to bottom right,
rgb(59, 81, 110),
rgb(62, 84, 117)
);
border: 1px solid;
border-bottom: 0px;
border-color: #6386b6;
}
.tab:nth-child(2) .tab-switch:checked + .tab-label {
background-image: linear-gradient(
to bottom right,
rgb(64, 91, 122),
rgb(63, 88, 123)
);
border: 1px solid;
border-bottom: 0px;
border-color: #6386b6;
}
.tab:nth-child(3) .tab-switch:checked + .tab-label {
background-image: linear-gradient(
to bottom right,
rgb(61, 91, 127),
rgb(64, 92, 128)
);
border: 1px solid;
border-bottom: 0px;
border-color: #6386b6;
}
.tab:last-child .tab-switch:checked + .tab-label {
background-image: linear-gradient(
to bottom right,
rgb(61, 94, 132),
rgb(66, 96, 135)
);
border: 1px solid;
border-bottom: 0px;
border-color: #6386b6;
}
.tab-switch:checked + label + .tab-content {
z-index: 1;
opacity: 1;
}
.tab:not(:first-child) .tab-switch:checked + label + .tab-content {
border-top-left-radius: 8px;
}<div class="container">
<div class="tabs">
<div class="tab">
<input type="radio" name="css-tabs" id="tab-1" checked class="tab-switch">
<label for="tab-1" class="tab-label">Rate it</label>
<div class="tab-content">
<div class="question-1">
<label>Question 1</label>
</div>
<div class="question-2">
<label>Question 2</label>
</div>
<div class="question-3">
<label>Question 3</label>
</div>
<div class="question-4">
<label>Question 4</label>
</div>
<div class="question-5">
<label>Question 5</label>
</div>
<div class="rating1">
<div class="rating">
<input type="radio" name="star1" id="rad-1"><label for="rad-1">
</label>
<input type="radio" name="star1" id="rad-2"><label for="rad-2">
</label>
<input type="radio" name="star1" id="rad-3"><label for="rad-3">
</label>
<input type="radio" name="star1" id="rad-4"><label for="rad-4">
</label>
<input type="radio" name="star1" id="rad-5"><label for="rad-5">
</label>
</div>
</div>
<div class="rating2">
<div class="rating">
<input type="radio" name="star2" id="rad-6"><label for="rad-6">
</label>
<input type="radio" name="star2" id="rad-7"><label for="rad-7">
</label>
<input type="radio" name="star2" id="rad-8"><label for="rad-8">
</label>
<input type="radio" name="star2" id="rad-9"><label for="rad-9">
</label>
<input type="radio" name="star2" id="rad-10"><label for="rad-10">
</label>
</div>
</div>
<div class="rating3">
<div class="rating">
<input type="radio" name="star3" id="rad-11"><label for="rad-11">
</label>
<input type="radio" name="star3" id="rad-12"><label for="rad-12">
</label>
<input type="radio" name="star3" id="rad-13"><label for="rad-13">
</label>
<input type="radio" name="star3" id="rad-14"><label for="rad-14">
</label>
<input type="radio" name="star3" id="rad-15"><label for="rad-15">
</label>
</div>
</div>
<div class="rating4">
<div class="rating">
<input type="radio" name="star4" id="rad-16"><label for="rad-16">
</label>
<input type="radio" name="star4" id="rad-17"><label for="rad-17">
</label>
<input type="radio" name="star4" id="rad-18"><label for="rad-18">
</label>
<input type="radio" name="star4" id="rad-19"><label for="rad-19">
</label>
<input type="radio" name="star4" id="rad-0"><label for="rad-20">
</label>
</div>
</div>
<div class="rating5">
<div class="rating">
<input type="radio" name="star5" id="rad-21"><label for="rad-21">
</label>
<input type="radio" name="star5" id="rad-22"><label for="rad-22">
</label>
<input type="radio" name="star5" id="rad-23"><label for="rad-23">
</label>
<input type="radio" name="star5" id="rad-24"><label for="rad-24">
</label>
<input type="radio" name="star5" id="rad-25"><label for="rad-25">
</label>
</div>
</div>
</div>
</div>
<div class="tab">
<input type="radio" name="css-tabs" id="tab-2" class="tab-switch">
<label for="tab-2" class="tab-label">Buzz it</label>
<div class="tab-content"> </div>
</div>
<div class="tab">
<input type="radio" name="css-tabs" id="tab-3" class="tab-switch">
<label for="tab-3" class="tab-label">Vibe it</label>
<div class="tab-content"> </div>
</div>
<div class="tab">
<input type="radio" name="css-tabs" id="tab-4" class="tab-switch">
<label for="tab-4" class="tab-label">Review it</label>
<div class="tab-content"> </div>
</div>
</div>
</div>