Change cursor on disabled label

Question

I'm messing around with this css and can't figure out how to override the control class cursor attribute ('pointer') if the input inside of it is disabled. Can somebody help me out?

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;
}

so the thing is you need to remove pointer-events:none

read more about it here https://developer.mozilla.org/en/docs/Web/CSS/pointer-events

Answer 2

Refer to attributes in CSS using square brackets. Here's an example:

label {
  display: block;
}
input {
  cursor: pointer;
}
input[disabled] {
  cursor: default;
}

<label>
  Enabled
  <input type="checkbox">
</label>

<label>
  Disabled
  <input type="checkbox" disabled>
</label>

Note that with CSS alone, you won't be able to restyle the parent of the input based on its state, but you could restyle a sibling that comes after it in the DOM:

label {
  display: block;
}
input[disabled] ~ span {
  color: red;
}

<label>
  <input type="checkbox">
  <span>Enabled</span>
</label>

<label>
  <input type="checkbox" disabled>
  <span>Disabled</span>
</label>