Html 在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上工作，但我在这里对如何使其工作有点迷茫

---

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

我将

checked

类添加到滑块中，而不是

：选中了
输入复选框

所以CSS代码中有一些变化

.slider.checked{…}而不是
输入：checked+.slider{…}

.slider:focus{…}而不是
输入：focus+.slider{…}

.slider.checked:before{…}而不是
输入：checked+。slider:before{…}

在Jquery中尝试演示

使用Jquery单击滑块div切换类选中



$（“.slider”）。单击（函数（）{
$（this.toggleClass（“选中”）；
});
开关{
位置：相对位置；
显示：内联块；
宽度：90px；
高度：34px；
}
.滑块{
位置：绝对位置；
光标：指针；
排名：0；
左：0；
右：0；
底部：0；
背景色：#ca2222；
-webkit转换：.4s；
过渡：.4s；
边界半径：34px；
}
.滑块：之前{
位置：绝对位置；
内容：“；
高度：26px；
宽度：26px；
左：4px；
底部：4px；
背景色：白色；
-webkit转换：.4s；
过渡：.4s；
边界半径：50%；
}
.slider.checked{
背景色：#2ab934；
}
.滑块：焦点{
盒影：0 0 1px#2196F3；
}
.滑块。选中：之前{
-webkit转换：translateX（26px）；
-ms变换：translateX（26px）；
转化：translateX（55px）；
}
/*------添加CSS---------*/
.滑块：之后
{
内容:"关";；
颜色：白色；
显示：块；
位置：绝对位置；
转换：翻译（-50%，-50%）；
最高：50%；
左：50%；
字体大小：10px；
字体系列：Verdana，无衬线；
}
.滑块。选中：在
{  
内容：'ON'；
}
非常感谢，我希望只使用CSS解决这个问题，但这也很有效。谢谢