missing css to fix this toggle switch, z-index issue? - css

Question

This codepen has a yes / no toggle. the Yes doesn't display after the toggle has moved over it, but the No works? What css will get the Yes to show up?
https://codepen.io/trynn/pen/NWPNMdE
input[type="radio"].toggle {
display: none;
& + label{
cursor: pointer;
min-width: 60px;
border-radius: 30px;
&:hover{
background: none;
}
&:after{
background: blue;
content: "";
height: 100%;
position: absolute;
z-index:-1;
border-radius: 30px;
top: 0;
transition: left 200ms cubic-bezier(0.77, 0, 0.175, 1);
width: 100%;
}
}
&.toggle-left + label {
border-right: 0;
color: #fff;
&:after{
left: 100%;
}
}
&.toggle-right + label{
margin-left: -5px;
color: #fff;
&:after{
left: -100%;
}
}
&:checked + label {
cursor: default;
color: #fff;
transition: color 200ms;
&:after{
left: 0;
}
}
}

Answer 1

You added 2 blue bubbles for toggle-left and toggle-right since you only needed one of them moving from one to another. For your case, in order to not go over the 'yes', you should remove the :after in toggle-right. Try this:
.toggle-switch-container {
position: relative;
line-height: 32px;
border-radius: 30px;
width: fit-content;
margin-left: auto;
margin-right: auto;
margin-bottom:25px;
background-color: rgba(0, 0, 0, 1);
z-index:1;
}
.btn{
display: inline-block;
padding: 10px;
position: relative;
text-align: center;
transition: background 600ms ease, color 600ms ease;
z-index:100;
}
input[type="radio"].toggle {
display: none;
& + label{
cursor: pointer;
min-width: 60px;
border-radius: 30px;
&:hover{
background: none;
}
}
&.toggle-left + label {
border-right: 0;
color: #fff;
&:after{
background: blue;
content: "";
height: 100%;
position: absolute;
z-index:-1;
border-radius: 30px;
top: 0;
transition: left 200ms cubic-bezier(0.77, 0, 0.175, 1);
width: 100%;
left: 100%;
}
}
&.toggle-right + label{
margin-left: -5px;
color: #fff;
}
&:checked + label {
cursor: default;
color: #fff;
transition: color 200ms;
&:after{
left: 0;
}
}
}
For a simple explanation why this works: for 2 elements having the same z-index, the last element comes in front of the other. Your 2 toggle buttons had the same z-index, so their :after, so the toggle-right:after comes in front of toggle-left blocking the 'yes'. By removing the :after of toggle-right, you removed the element blocking the 'yes' solving the problem.

Answer 2

I think you are looking for this
body {
background-color: #ddd;
}
/*Style main div and remove default checkbox*/
.switch {
position: relative;
width: 75px;
margin: 0 auto;
}
.switch-checkbox {
display: none;
}
/*Style words and oval switch */
.switch-labels {
display: block;
overflow: hidden;
cursor: pointer;
border-radius: 20px;
}
.switch-text {
display: block;
width: 200%;
margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}
.switch-text:before,
.switch-text:after {
float: left;
width: 50%;
line-height: 30px;
color: white;
box-sizing: border-box;
}
.switch-text:before {
content: "ON";
padding-left: 10px;
background-color: #E1F6FF;
color: #000000;
}
.switch-text:after {
content: "OFF";
padding-right: 10px;
background-color: #4D5585;
color: #FFFFFF;
text-align: right;
}
/*Style center dot*/
.switch-dot {
width: 30px;
height: 30px;
background: #FFFFFF;
position: absolute;
top: 0;
bottom: 0;
right: 41px;
margin-right: 5px;
border-radius: 20px;
transition: all 0.3s ease-in 0s;
}
.switch-dot:after{
content: "";
position: absolute;
width: 20px;
height: 20px;
background-size: cover;
background-image: url('http://www.free-icons-download.net/images/multiply-icon-27981.png');
margin: 5px 0 0 5px;
}
/*State changer*/
.switch-checkbox:checked+.switch-labels .switch-text {
margin-left: 0;
}
.switch-checkbox:checked+.switch-labels .switch-dot {
right: 0px;
margin-right: 0px;
}
<div class="switch">
<input type="checkbox" name="switch" class="switch-checkbox" id="myswitch" checked>
<label class="switch-labels" for="myswitch">
<span class="switch-text"></span>
<span class="switch-dot"></span>
</label>
</div>
Using 2 text as on and off
.toggle-label {
position: relative;
display: block;
width: 300px;
height: 80px;
margin-top: 8px;
border: 1px solid #808080;
margin: 200px auto;
}
.toggle-label input[type=checkbox] {
opacity: 0;
position: absolute;
width: 100%;
height: 100%;
}
.toggle-label input[type=checkbox]+.back {
position: absolute;
width: 100%;
height: 100%;
background: #ed1c24;
transition: background 150ms linear;
}
.toggle-label input[type=checkbox]:checked+.back {
background: #00a651; /*green*/
}
.toggle-label input[type=checkbox]+.back .toggle {
display: block;
position: absolute;
content: ' ';
background: #fff;
width: 50%;
height: 100%;
transition: margin 150ms linear;
border: 1px solid #808080;
border-radius: 0;
}
.toggle-label input[type=checkbox]:checked+.back .toggle {
margin-left: 150px;
}
.toggle-label .label {
display: block;
position: absolute;
width: 50%;
color: #000;
line-height: 80px;
text-align: center;
font-size: 2em;
}
.toggle-label .label.on { left: 0px; }
.toggle-label .label.off { right: 0px; }
.toggle-label input[type=checkbox]:checked+.back .label.on {
color: #fff;
}
.toggle-label input[type=checkbox]+.back .label.off {
color: #000;
}
.toggle-label input[type=checkbox]:checked+.back .label.off {
color: #000;
}
<label class='toggle-label'>
<input type='checkbox'/>
<span class='back'>
<span class='toggle'></span>
<span class='label on'>ON</span>
<span class='label off'>OFF</span>
</span>
</label>