在div而不是输入字段上使用CSS切换

问题描述

我正在寻找一种制作某种切换按钮的方法，但我发现了一种正是我想要的方法，但是本示例在输入字段上使用切换，而我想在div上使用它。我尝试了几种更改CSS类的方法，但是由于某种原因我无法使其正常工作。

这是我使用的CSS示例：

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

.switch input {display:none;}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ca2222;
  -webkit-transition: .4s;
  transition: .4s;
   border-radius: 34px;
}

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

input:checked + .slider {
  background-color: #2ab934;
}

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

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

/*------ ADDED CSS ---------*/
.slider:after
{
 content:'OFF';
 color: white;
 display: block;
 position: absolute;
 transform: translate(-50%,-50%);
 top: 50%;
 left: 50%;
 font-size: 10px;
 font-family: Verdana,sans-serif;
}

input:checked + .slider:after
{  
  content:'ON';
}

/*--------- END --------*/

这是示例HTML：

<label class="switch"><input type="checkbox" id="togBtn"><div class="slider round"></div></label>

当我像这样使用它时，一切工作正常，但是我要切换的HTML和div如下：

<div class="facetwp-facet facetwp-facet-aanbieding facetwp-type-checkboxes" data-name="aanbieding" data-type="checkboxes">
    <div class="facetwp-checkbox" data-value="ja">Ja</div>
</div>

我对示例CSS进行了更改，以使其可以在要切换的div上工作，但是我对如何使它工作有点迷茫。

也许这很简单，但是我迷路了，所以如果有人可以帮我一点忙，那就太好了！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

html toggle