css - 更改禁用标签上的光标

Question

我正在弄乱这个 css，并且无法弄清楚如果其中的输入被禁用，如何覆盖控件类光标属性(“指针”)。有人可以帮帮我吗？

Codepen Link

<label class="control control--checkbox">Disabled
    <input type="checkbox" disabled="disabled"/>
    <div class="control__indicator"></div>
</label>

.control {
  font-size: 18px;
  position: relative;
  display: block;
  margin-bottom: 15px;
  padding-left: 30px;
  cursor: pointer;
}

.control__indicator {
  position: absolute;
  top: 2px;
  left: 0;
  width: 20px;
  height: 20px;
  background: #e6e6e6;
}

Answer 1

/* Disabled state */
.control input:disabled ~ .control__indicator {

  cursor: not-allowed;
    opacity: .6;
    background: red;
}

所以你需要删除 pointer-events:none

在这里阅读更多信息 https://developer.mozilla.org/en/docs/Web/CSS/pointer-events