Question

在这里，我尝试使用切换按钮中的文本创建切换按钮。
我已经完成了大部分代码，但是当我尝试切换按钮时，活动颜色不会改变
当活动的切换按钮当时处于活动状态时，我需要做的事情应该是白色
我正在使用带角度的引导程序
列表项
这是我尝试的代码。

.toggle-switch {
  max-width: 68px;

}
 .switch6-light > span, 
 .switch-toggle > span {
  color: #000000;
}
.switch6-light span span,
.switch6-light label,
.switch-toggle span span,
.switch-toggle label {
  color: #2b2b2b;
}

.switch-toggle a,
.switch6-light span span {
  display: none;
}

.switch6-light {
  display: block;
  height: 30px;
  position: relative;
  overflow: visible;
  padding: 0px;
  margin-left: 0px;
}
.switch6-light * {
  box-sizing: border-box;
}
.switch6-light a {
  display: block;
  transition: all 0.3s ease-out 0s;
}

.switch6-light label,
.switch6-light > span {
  line-height: 30px;
  vertical-align: middle;
}

.switch6-light label {
  font-weight: 700;
  margin-bottom: px;
  max-width: 100%;
}

.switch6-light input:focus ~ a,
.switch6-light input:focus + label {
  outline: 1px dotted rgb(136, 136, 136);
}
.switch6-light input {
  position: absolute;
  opacity: 0;
  z-index: 5;
}
.switch6-light input:checked ~ a {
  right: 0%;
}
.switch6-light > span {
  position: absolute;
  width: 100%;
  text-align: left;
}
.switch6-light > span span {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 5;
  display: block;
  width: 50%;
  text-align: center;
}
.switch6-light > span span:last-child {
  left: 50%;
}
.switch6-light a {
  position: absolute;
  right: 50%;
  top: 0px;
  z-index: 4;
  display: block;
  width: 50%;
  height: 100%;
  padding: 0px;
  max-width: 34px;
  height: 24px;
  border-radius: 20px;
  border: solid 1px #ffffff;
  background-image: linear-gradient(to bottom, #031091, #010866 26%, #4b0c79 61%, #881190);
}

<div class="toggle-switch">
   <label class="switch6-light" onclick="">
      <input type="checkbox">
        <span>
            <span>Off</span>
            <span>On</span>
        </span>
      <a></a>
  </label>
</div>

Answer 1

您可以尝试以下CSS：

// Change color of the On span when checkbox checked
.switch6-light input:not(:checked) + span span:first-child {
  color: #fff;
}
// Change color of the Off span when checkbox not checked
.switch6-light input:checked + span span:last-child {
  color: #fff;
}

.toggle-switch {
  max-width: 68px;

}
 .switch6-light > span, 
 .switch-toggle > span {
  color: #000000;
}
.switch6-light span span,
.switch6-light label,
.switch-toggle span span,
.switch-toggle label {
  color: #2b2b2b;
}

.switch-toggle a,
.switch6-light span span {
  display: none;
}

.switch6-light {
  display: block;
  height: 30px;
  position: relative;
  overflow: visible;
  padding: 0px;
  margin-left: 0px;
}
.switch6-light * {
  box-sizing: border-box;
}
.switch6-light a {
  display: block;
  transition: all 0.3s ease-out 0s;
}

.switch6-light label,
.switch6-light > span {
  line-height: 30px;
  vertical-align: middle;
}

.switch6-light label {
  font-weight: 700;
  margin-bottom: px;
  max-width: 100%;
}

.switch6-light input:focus ~ a,
.switch6-light input:focus + label {
  outline: 1px dotted rgb(136, 136, 136);
}
.switch6-light input {
  position: absolute;
  opacity: 0;
  z-index: 5;
}
.switch6-light input:checked ~ a {
  right: 0%;
}

.switch6-light input:not(:checked) + span span:first-child {
  color: #fff;
}
.switch6-light input:checked + span span:last-child {
  color: #fff;
}

.switch6-light > span {
  position: absolute;
  width: 100%;
  text-align: left;
}
.switch6-light > span span {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 5;
  display: block;
  width: 50%;
  text-align: center;
}
.switch6-light > span span:last-child {
  left: 50%;
}
.switch6-light a {
  position: absolute;
  right: 50%;
  top: 0px;
  z-index: 4;
  display: block;
  width: 50%;
  height: 100%;
  padding: 0px;
  max-width: 34px;
  height: 24px;
  border-radius: 20px;
  border: solid 1px #ffffff;
  background-image: linear-gradient(to bottom, #031091, #010866 26%, #4b0c79 61%, #881190);
}

<div class="toggle-switch">
   <label class="switch6-light" onclick="">
      <input type="checkbox">
        <span>
            <span>Off</span>
            <span>On</span>
        </span>
      <a></a>
  </label>
</div>

如何使用文字切换引导按钮？

1 个答案: