css中的onclick背景颜色转换

Question

在这里，我正在尝试将带有幻灯片过渡的背景颜色添加到单选按钮。在活动背景色上移动幻灯片过渡。我尝试使用transform: translate();，但它不起作用。而且我不想更改 HTML。谁能建议我如何实现。

/** Case Switch Button **/

.case-switch-wrap h3 {
  font-family: "Lato", Sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.5px;
  color: #000000;
}

.case-switch {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  /*   height: 38px; */
  width: 130px;
  background: #e6e6e6;
  border-radius: 3px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0%), 0 1px rgba(255, 255, 255, 10%);
}

.switch-label {
  padding-left: 65px;
  position: relative;
  z-index: 999999999;
}

.switch-label input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.switch-label .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 40px;
  width: 65px;
  background: #e6e6e6;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

.switch-label input:checked~.checkmark {
  background: #39ccae;
  color: #fff;
}

.switch-label input:checked~.text {
  font-weight: bold;
}

<div class="case-switch">

  <label class="switch-label switch-label-on">
    <input type="radio" class="switch-input" name="switch-toggle" data-ref="on" checked>
    <span class="checkmark">On</span>
    </label>

  <label class="switch-label switch-label-off">
    <input type="radio" class="switch-input" name="switch-toggle" data-ref="off">
      <span class="checkmark">Off</span>
    </label>
</div>

Answer 1

解决方法是使用::after创建一个可以来回滑动的新元素。我在switch-label-off 之后创建了它，并使用translateX 来回移动它。我将容器case-switch 调整为具有背景和边框，并删除了导致错位的规则。我还将switch-label-off 的z-index 调整为低于switch-label-on。其余的新规则在 css 的底部。

/** Case Switch Button **/

.case-switch-wrap h3 {
  font-family: "Lato", Sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.5px;
  color: #000000;
}

.case-switch {
  position: relative;
  /*display: -webkit-box;
  display: -ms-flexbox;
  display: flex;*/
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: start;
  height: 40px;
  width: 130px;
  background: #f0f0f0;
    border : 1px solid #e6e6e6;
  border-radius: 3px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0%), 0 1px rgba(255, 255, 255, 10%);
}

.switch-label {
  padding-left: 65px;
  position: relative;
  z-index: 999;
}


.switch-label input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.switch-label .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 40px;
  width: 65px;
  background: transparent /* set to transparent */;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}


.switch-label input:checked~.checkmark {
  color: #fff;
}
 
/* set this one to be below the other in z-index */
.switch-label.switch-label-off {
  z-index: 998;
}
/* transition on checkmark color with tiny delay */
.switch-label .checkmark {
  transition: color .3s linear .05s;
}

/* new element to use as our slider */
.switch-label.switch-label-off .checkmark::after {
  content: " ";
  position: absolute;
  top: 0;
  z-index: -100;
  left: 0;
  height: 40px;
  width: 65px;
  background: #39ccae;
  text-align: center;
  border-radius: 4px;
  transform: translateX(-66px);
  transition: transform .3s ease-in-out;
}

.switch-label input:checked~.checkmark::after {
  transform: translateX(0px);
}

.switch-label input:checked~.text {
  font-weight: bold;
}

<div class="case-switch">
  <label class="switch-label switch-label-on">
    <input type="radio" class="switch-input" name="switch-toggle" data-ref="on" checked>
    <span class="checkmark">On</span>
    </label>
  <label class="switch-label switch-label-off">
    <input type="radio" class="switch-input" name="switch-toggle" data-ref="off">
      <span class="checkmark">Off</span>
    </label>
</div>