想要使用选中+禁用属性更改复选框的颜色，但与仅禁用的属性不相似

Question

我有不同功能的不同复选框，效果很好。我的要求是我想同时用"checked" & "disabled"属性更改复选框的颜色，即我的最后一个复选框。但与其中只有"disabled"属性的复选框类似，即我的第三个复选框。提前谢谢。

＆＃13;

＆＃13;

.switch, .switch {
    -moz-user-select: none;
}
.switch label input[type="checkbox"] {
    height: 0;
    opacity: 0;
    width: 0;
}
.switch label input[type="checkbox"]:not(:checked), 
.switch label input[type="checkbox"]:checked {
    left: -9999px;
    opacity: 0;
    position: absolute;
}
.switch label input[type="checkbox"]:checked + .lever::after {
    background-color: #629fd9;
    left: 14px;
}
.switch label input[type="checkbox"]:disabled + .lever::after {
    background-color: #E6E6E6;
}
.switch label input[type="checkbox"]:disabled + .lever,
.switch label input[type="checkbox"][disabled="disabled"]:checked + .lever{
    background-color: #F0F0F0;
}

.switch label input[type="checkbox"][disabled="disabled"]:checked + .lever::after{
    background-color: #B3C6D8;
}
.switch label .lever::after {
    background-color: #C0C0C0;
    border-radius: 21px;
    content: "";
    display: inline-block;
    height: 13px;
    left: 0px;
    position: absolute;
    top: -3px;
    transition: left 0.3s ease 0s, background 0.3s ease 0s, box-shadow 0.1s ease 0s;
    width: 13px;
}
.switch label input[type="checkbox"]:checked + .lever {
    background-color: #DFDFDF;
}


.switch label .lever {
    background-color: #DFDFDF;
    border-radius: 15px;
    content: "";
    display: inline-block;
    height: 7px;
    margin: 0 16px;
    position: relative;
    transition: background 0.3s ease 0s;
    vertical-align: middle;
    width: 27px;
    margin-right: 4px;
}
.switch label {
    margin-left:-15px;
}

＆＃13;

<div class="switch">
	<label>
	<input type="checkbox">
	<span class="lever"></span> <span>Option Unchecked</span> </label>
</div>
<div class="switch">
	<label>
	<input type="checkbox" checked>
	<span class="lever"></span> <span>Option Checked</span> </label>
</div>
<div class="switch">
	<label>
	<input type="checkbox" disabled>
	<span class="lever"></span> <span>Option Disabled</span> </label>
</div>
<div class="switch">
	<label>
	<input type="checkbox" disabled checked>
	<span class="lever"></span> <span>Option Checked and disabled</span> </label>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

这应该有效

definition.get_text()

.switch label input[type="checkbox"][disabled]:checked + .lever { background-color: pink; } 是一个属性，但[disabled]是一个伪类，因此在这种情况下它们的选择方式不同。

:checked

.switch,
.switch {
  -moz-user-select: none;
}
.switch label input[type="checkbox"] {
  height: 0;
  opacity: 0;
  width: 0;
}
.switch label input[type="checkbox"]:not(:checked),
.switch label input[type="checkbox"]:checked {
  left: -9999px;
  opacity: 0;
  position: absolute;
}
.switch label input[type="checkbox"]:checked + .lever::after {
  background-color: #629fd9;
  left: 14px;
}
.switch label input[type="checkbox"][disabled]:checked + .lever {
  background-color: red;
}
.switch label .lever::after {
  background-color: #C0C0C0;
  border-radius: 21px;
  content: "";
  display: inline-block;
  height: 13px;
  left: 0px;
  position: absolute;
  top: -3px;
  transition: left 0.3s ease 0s, background 0.3s ease 0s, box-shadow 0.1s ease 0s;
  width: 13px;
}
.switch label input[type="checkbox"]:checked + .lever {
  background-color: #DFDFDF;
}
.switch label .lever {
  background-color: #DFDFDF;
  border-radius: 15px;
  content: "";
  display: inline-block;
  height: 7px;
  margin: 0 16px;
  position: relative;
  transition: background 0.3s ease 0s;
  vertical-align: middle;
  width: 27px;
  margin-right: 4px;
}
.switch label {
  margin-left: -15px;
}