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

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

}

Does this answer your question? [How to add the text "ON" and "OFF" to toggle button](https://stackoverflow.com/questions/39846282/how-to-add-the-text-on-and-off-to-toggle-button) — Awais, Dec 11 '19 at 09:22
It's because the right toggle after is covering the the left toggle and therefore the z-index won't work - you probably want to hide the overflow opf each label so they only show their own after — Pete, Dec 11 '19 at 09:43
Thanks Awais and Pete, new issue: new issue, not working in the browser?? starts out the page and check to make sure no odd characters in the way, but not working? codepen works great, but not on chrome... & + label{ saying: "unknown property name" any thoughts? — user1864734, Dec 12 '19 at 17:03
FYI. found issue... codepen changes the code, when it displays it.... check out the "iframe code" on the codepen display... its not what is in the css view :) — user1864734, Dec 12 '19 at 18:50

Awais · Answer 1 · 2019-12-13T04:28:52.610

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>

Thanks Awais, but technically, I have a little different use, where needing both labels to be displayed, etc. but that is nice :) will use it in another place. — user1864734, Dec 12 '19 at 16:48
@user1864734 I updated my question with your desire input please check — Awais, Dec 13 '19 at 04:29

score 0 · Answer 2 · answered Dec 11 '19 at 10:13

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.

THANKS Ahmed!! That works great in codepen... but oldly enough, on Chrome, it complains at this line: & + label{ saying: "unknown property name" Confused why it works in codepen, not on the browser? — user1864734, Dec 12 '19 at 16:46
I guess it's the scss compiler not being able to understand what is `& +`. Anyway, you can just write that selector in traditional css way or use codepen compiled css directly. I'm sure you have figured it out by now. — Ahmed Rafik Ibrahim, Dec 15 '19 at 11:14

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

2 Answers2