Как переключить кнопку bootstrap с текстом?

Question

• Здесь я пытаюсь создать кнопку переключения с текстом в кнопке переключения.
• Я сделал большую часть кода, но когда я пытаюсь переключить кнопку, активный цвет не меняется
• Мне нужно сделать, когда активная в то время кнопка переключения Цвет текста активной кнопки должен быть белым
• Я использую bootstrap с angular
• Элемент списка
• Вот мой код, что я пытаюсь.

.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>