Sam94 Sam94 - 3 months ago 17
CSS Question

Check if input inside label is disabled

My HTML for the form is like the following snippet:

<label>
<input type="radio" name="package" value="single"/>
<span class="label-text">Single</span>
</label>


To show the user, that the field is clickable, I set the CSS of the label to:

label {
curser: pointer;
}


Now I was wondering if it is possible to check (in CSS) if the input field is disabled, and if so, set the cursor to
not-allowed
.

I tried using:

label:has(> input:disabled) {
cursor: not-allowed;
}


But that didn'tt work. Do you know how to do this?

Answer

Based on your actual markup we can modify the target for the cursor change and make the span more relevant this way:

label {
  position: relative;
  margin:20px;
}
label span {
  cursor:pointer;
  position: relative;
  z-index:10;
  padding-left:20px;
}
label input {
  position:absolute;
}
input[disabled]  + span {
  cursor: not-allowed;
  color:#666;
}
<label>
  <input type="radio" name="package" value="single" />
  <span class="label-text">Single</span>
</label>
<label>
  <input type="radio" name="package" value="single" disabled/>
  <span class="label-text">Single</span>
</label>


Or if you don't want it absolute:

label {
  margin: 20px;
}
label span, label input {
  cursor: pointer;
}
label input[disabled], input[disabled] + span {
  cursor: not-allowed;
  color: #666;
}
<label>
  <input type="radio" name="package" value="single" />
  <span class="label-text">Single</span>
</label>
<label>
  <input type="radio" name="package" value="single" disabled/>
  <span class="label-text">Single</span>
</label>