I would like to connect two labels and toggle switches. If you click the toggle switch, it is desired that the switch is activated when you click the respective labels. However, if you click on the same label, you do not want the switch to move.

I made a toggle switch along this link . This button works very well. But I don't know what to do to achieve the effect I want.I tried putting two options in the label, but the layout is broken.

I can't use other frameworks such as jQuery. Pure JavaScript support is available.

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

<label class="switch">
  <input type="checkbox">
  <span class="slider round"></span>
</label>

I would like to connect two labels and toggle switches. If you click the toggle switch, it is desired that the switch is activated when you click the respective labels. However, if you click on the same label, you do not want the switch to move.

I made a toggle switch along this link https://www.w3schools./howto. This button works very well. But I don't know what to do to achieve the effect I want.I tried putting two options in the label, but the layout is broken.

I can't use other frameworks such as jQuery. Pure JavaScript support is available.

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

<label class="switch">
  <input type="checkbox">
  <span class="slider round"></span>
</label>

• javascript
• html
• css

Share Follow asked Aug 14, 2020 at 9:50 eujineujin 18233 silver badges1414 bronze badges 1

• 1 i suspect that the solution might be to use TWO checkboxes or a radio group. – Paulie_D Commented Aug 14, 2020 at 9:58

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

This would be simple to solve with JavaScript, but it's a more interesting question with pure CSS/HTML.

Explanation: pointer-events: none disables clicks from having any effect. pointer-events: all is used selectively on child elements to re-enable clicking on them, depending on the checked state of the input.

/* the interesting bit */

.label {
  pointer-events: none;
  display: flex;
  align-items: center;
}

.switch,
.input:checked + .label .left,
.input:not(:checked) + .label .right {
  pointer-events: all;
  cursor: pointer;
}

/* most of the stuff below is the same as the W3Schools stuff,
   but modified a bit to reflect changed HTML structure */

.input {
  display: none;
}

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

input:checked + .label .slider {
  background-color: #2196f3;
}

input:focus + .label .slider {
  box-shadow: 0 0 1px #2196f3;
}

input:checked + .label .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

/* styling to make it look like your screenshot */

.left, .right {
  margin: 0 .5em;
  font-weight: bold;
  text-transform: uppercase;
  font-family: sans-serif;
}

<input class="input" id="toggle" type="checkbox">

<label class="label" for="toggle">
  <div class="left">
    Option A
  </div>

  <div class="switch">
    <span class="slider round"></span>
  </div>

  <div class="right">
    Option B
  </div>
</label>

This will help you perfectly using two radio button.

HTML :-

 <div class="normal-container">
  <div class="smile-rating-container">
    <div class="smile-rating-toggle-container">
      <form class="submit-rating">
        <input id="meh"  name="satisfaction" type="radio" />
        <input id="fun" name="satisfaction" type="radio" />
        <label for="meh" class="rating-label rating-label-meh">Bad</label>
        <div class="smile-rating-toggle"></div>
        <div class="toggle-rating-pill"></div>
        <label for="fun" class="rating-label rating-label-fun">Fun</label>
      </form>
    </div>
  </div>
</div>

CSS:-

    .smile-rating-container {
    position: relative;
    height: 10%;
    min-width: 220px;
    max-width: 520px;
    margin: auto;
    font-family: 'Roboto', sans-serif;
    top: 20%;
}
.submit-rating {
    display: flex;
    align-items: center;
    justify-content: center;
}
.rating-label {
    position: relative;
    font-size: 1.6em;
    text-align: center;
    flex: 0.34;
    z-index: 3;
    font-weight: bold;
    cursor: pointer;
    color: grey;
    transition: 500ms;
}
.rating-label:hover, .rating-label:active {
    color: grey;
}
.rating-label-fun {
    left: -58px;
    text-align: right;
}
.rating-label-meh {
    left: 58px;
    text-align: left;
    color: #222;
}
.smile-rating-container input {
    display: none;
}
.toggle-rating-pill {
    position: relative;
    height: 65px;
    width: 165px;
    background: grey;
    border-radius: 500px;
    transition: all 500ms;
}
.smile-rating-toggle {
    position: absolute;
    width: 54px;
    height: 54px;
    background-color: white;
    left: 182px;
    border-radius: 500px;
    transition: all 500ms;
    z-index: 4;
}
/*
Toggle Changes
*/

#meh:checked~.rating-label-meh {
 color: #2196f3;
}
#fun:checked~.rating-label-meh {
 color: grey;
}
#fun:checked~.mouth {
 border: 4px solid #2196f3;
 border-bottom-color: rgba(1, 1, 1, 0);
 border-right-color: rgba(1, 1, 1, 0);
 border-left-color: rgba(1, 1, 1, 0);
 top: 23px;
 left: 291px;
 transform: rotateX(180deg);
 border-radius: 100%;
}
 #fun:checked~.rating-label-fun {
 color: #2196f3;
}
#fun:checked~.smile-rating-toggle {
 left: 282px;
}
 #fun:checked~.rating-eye-left {
 left: 292px;
}
#fun:checked~.rating-eye-right {
 left: 316px;
}
 #fun:checked~.toggle-rating-pill {
 background-color: #2196f3;
}
 #fun:checked~.rating-eye {
 background-color: #2196f3;
}