Apply custom class name to wrapper when input is disabled

[chawes13]

I want to target an input's label when the element is disabled to ensure that the cursor styling does not confuse the user. However, the adjacent sibling connector can only target the second element. Thus it is not possible in our current implementation to target a checkbox's label when the input is disabled.

For example,

input:disabled + label {
  cursor: auto;
}

This above example doesn't work because the label comes before the input. One solution would be to move the label to after the input for checkbox and radio input types. Alternatively, we could add a custom class name indicating that the field (i.e., label and input) are disabled to allow for specialized overrides.

[chawes13]

@marchwiany Have you run into this issue before? Any existing workarounds that I haven't considered?

[chawes13]

There is a parent selector in Safari's Technology Preview, but it hasn't been rolled out to any nightly builds across the three major vendors: https://caniuse.com/?search=has