[css-forms-1] Checkbox/radio button base appearance has no disabled state

[nt1m]

See https://drafts.csswg.org/css-forms-1/#stylesheet-checkbox-radio

We should add some :disabled styling by default, so people don't accidentally forget to consider the disabled state.

[shallawa]

This styling can make the checkbox and the radio look dimmed if they are disabled:

    input:is([type=checkbox]:not([switch]), [type=radio]):disabled {
        background-color: color-mix(in srgb, currentColor 10%, transparent);
        filter: opacity(0.5);
    }

    input:is([type=checkbox]:not([switch]), [type=radio]):checked:disabled::checkmark {
        filter: opacity(0.5);
    }

[fantasai]

@shallawa Any reason not to use opacity directly rather than filter: opacity(0.5)?

[shallawa]

@shallawa Any reason not to use opacity directly rather than filter: opacity(0.5)?

No there is no reason to prefer filter: opacity(0.5) over opacity: 0.5. For WebKit, both of them rendered the same way.

[css-meeting-bot]

The CSS Working Group just discussed [css-forms-1] Checkbox/radio button base appearance has no disabled state, and agreed to the following:

• RESOLVED: opacity:0.5 for disabled state for checkboxes, radios, and switches

The full IRC log of that discussion

<jarhar> ntim: right now theres no disabled state for appearance base checkboxes, and thats one of the things that makes appearance base default unusuable
<jarhar> ntim: current proposal is opacity 0.5
<jarhar> q+
<jarhar> lwarlow: that makes sense, provided the contrast stays ok with the border compared to the background color
<jarhar> lwarlow: theres an existing contrast thing with disabled states
<jarhar> fantasai: maybe we end up with opacity: 0.7 or something
<jarhar> lwarlow: does color-mix do background color
<jarhar> fantasai: thats trying to make the checkboxes look more disabled
<jarhar> lwarlow: if its an unchecked checkbox then the only thing that changes is the border
<jarhar> ntim: i prefer not putting a background
<jarhar> ntim: i think opacity makes it look disabled enough
<jarhar> q-
<jarhar> fantasai: im not really sure
<masonf> q-
<jarhar> lwarlow: we could resolve to add opacity style
<astearns> ack dbaron
<jarhar> dbaron: are you proposing to do separate style for checkmark to make it more or less opaque? because that seems a little weird to me
<jarhar> dbaron: disabled checkboxes and radios can still be checked or unchecked and that should still be as visible as the control is, and this is proposing to double that opacity
<jarhar> ntim: i also disagree with that part of the change, having a double opacity
<jarhar> fantasai: i think that might be a mistake
<jarhar> astearns: sounds like we are fine adding some disabled styling, and using opacity:0.5 for now
<dbaron> (we're talking about the separate rule for the `::checkmark`)
<jarhar> lwarlow: this doesn't apply to switches, and maybe switches need the same
<jarhar> lwarlow: we can add disabled styles for checkboxes radios and switches with 0.5
<jarhar> ntim: are there any other controls where we are missing disabled state?
<jarhar> proposed resolution: opacity:0.5 for disabled state for checkboxes, radios, and switches
<lwarlow> We're missing readonly states but I think this covers all disableds
<jarhar> RESOLVED: opacity:0.5 for disabled state for checkboxes, radios, and switches
<fantasai> visual testcase -
<fantasai> https://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E%0A%3Chtml%20style%3D%22background%3A%20black%3B%20color%3A%20lime%22%3E%0A%3Cstyle%3Ediv%20%7B%20border%3A%20solid%201px%3B%20width%3A%201em%3B%20height%3A%201em%3B%20margin%3A%200%201em%3B%20vertical-align%3A%20middle%3B%20display%3A%20inline-block%3B%20%7D%3C%2Fstyle%3E%0A%3Cdiv%3E%3C%2Fdiv%3E%20Checkbox%201%0A%3Cdiv%20style%3D%2