主页 / 问题 / 1588844
Accepted
drako black
Asked:2024-07-30 12:14:12 +0000 UTC2024-07-30 12:14:12 +0000 UTC

通过 CSS 设置复选框开关

  • 772

朋友们，帮我完成转换吧...

问题是什么：

总的来说，我决定用 CSS 制作一个带有滑块的标准 chekbox 开关（幸运的是，互联网上有足够多的此类东西），然后我决定向其添加文本“ON”/“OFF” ，然后问题就开始了，如何在纯CSS上不使用JS，让切换滑块时的铭文消失和出现呢？再次，我在互联网上发现@media通常在这种情况下使用的信息，但我没有找到任何关于如何准确执行此操作的信息......

我还尝试了使用“+”的标准选项：

.chek:checked + #off_right {
  visibility: hidden;
}

但似乎我要么没有完成某件事，要么做错了某件事，因为它不起作用。

.chek {
  visibility: hidden;
}
.chekbox {
  position: relative;
  width: 70px;
  height: 30px;
  background-color: red;
  border-radius: 50px;
}
.chekbox:after {
  content: '';
  position: absolute;
  top: 5px;
  right: 3px;
  width: 40px;
  height: 24px;
}

.chek-label {
  position: absolute;
  width: 25px;
  height: 25px;
  border-radius: 50px;
  background-color: black;
  top: 3px;
  left: 3px;
  transition: all 0.4s ease;
  cursor: pointer;
  z-index: 1;
}
.chek:checked + .chek-label {
  left: 40px;
}
#on_left {
  position: absolute;
  visibility: hidden;
  top: 5px;
  left: 5px;
  text-align: center;
  vertical-align: middle;
  font-weight: bold;
}
#off_right {
  position: absolute;
  visibility: visible;
  top: 5px;
  right: 5px;
  text-align: center;
  vertical-align: middle;
  font-weight: bold;
}
@media (checked) {
  #on_left {
    visibility: visible;
  }
  #off_right {
    visibility: hidden;
  }
}
<div class="chekbox">
  <input type="checkbox" id="btn_audio" class="chek">
  <label for="btn_audio" class="chek-label"></label>
  <span id="on_left">ON</span>
  <span id="off_right">OFF</span>
</div>

我将不胜感激的帮助和解释。另外，如果有人可以分享有关这一切如何运作的合理信息来源，我也将不胜感激。

PS 我所说的“明智”是指来源不是来自“2+2=4，现在求解积分”类别，而是来自“它像这样工作，但要得到这个，你需要使用这个”类别。 （一般来说，一切都用人类语言详细解释）。

html

1 个回答

  1. Best Answer

    :root {
  --transitionDuration: 0.4s;
  --transitionTimingFunction: ease;
}

.chek {
  visibility: hidden;
}

.checkbox {
  position: relative;
  display: block;
  width: 70px;
  height: 30px;
  background-color: red;
  border-radius: 50px;
  cursor: pointer;
  user-select: none;
  transition: background-color var(--transitionDuration) var(--transitionTimingFunction);
}


.chek-label {
  position: absolute;
  width: 25px;
  height: 25px;
  border-radius: 50px;
  background-color: black;
  top: 3px;
  left: 3px;
  z-index: 1;
  transition: transform var(--transitionDuration) var(--transitionTimingFunction);
}
.chek:checked + .chek-label {
  transform: translateX(40px);
}

.on-left, .off-right {
  transition-property: opacity, visibility;
  transition-timing-function: var(--transitionTimingFunction);
  transition-duration: var(--transitionDuration);
}

.on-left {
  position: absolute;
  visibility: hidden;
  opacity: 0;
  top: 5px;
  left: 5px;
  text-align: center;
  vertical-align: middle;
  font-weight: bold;
}

.off-right {
  position: absolute;
  visibility: visible;
  opacity: 1;
  top: 5px;
  right: 5px;
  text-align: center;
  vertical-align: middle;
  font-weight: bold;
}

.chek:checked ~ .off-right {
  opacity: 0;
  visibility: hidden;
}

.chek:checked ~ .on-left {
  opacity: 1;
  visibility: visible;
}

.checkbox:has(.chek:checked) {
  background-color: limegreen;
}
    <label class="checkbox">
  <input type="checkbox" id="btn_audio" class="chek">
  <span class="chek-label"></span>
  <span class="on-left">ON</span>
  <span class="off-right">OFF</span>
</label>

    • 1

相关问题