html - 如何设置:disabled pseudo element/class on :before pseudo element

Question

我想在禁用时更改切换按钮的颜色。我使用 :before fetaure of css 实现了这个切换。代码位于 https://jsfiddle.net/sachin8085/adm5t7rz/6/

<div>
Step 1> click on toggle button <br />

step 2> click on disable button <br />

result > Blue color of switch should change to gray when it get disabled.

</div>
<div>



<label class="toggleswitch" style="hidden: true" id="lblToggle">
  <input id="enableSN" name="enableSN" class="switch-input" type="checkbox" [(ngModel)]="appEnabled" (ngModelChange)="switchChange($event)">

  <div class="slider"></div>
</label>

<div>
  <button class="btn btn-primary" id="btnDisabled" text="disable" onclick="ondisabledclick()"> disable</button>
</div>
<div id="demo">
  Sample
</div>

</div>

CSS

/* The switch - the box around the slider */

.toggleswitch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}


/* Hide default HTML checkbox */

.toggleswitch input {
  display: none;
}

当父元素被禁用时，无法找到设置 :before 元素背景颜色属性的方法。

Answer 1

不知道是不是你想要的

.disabled .slider:before{
  background-color: red;
}
.disabled input:checked + .slider:before{
  background-color: green;
}

示例:jsfiddle

而且如果我是对的，你不应该在标签内使用 block 元素 (div)，这是错误的行为

https://stackoverflow.com/a/18609649/1121576