[css-forms-1] option hover/active styles inside of disabled select listbox

[lukewarlow]

Currently per the CSS forms spec (and as implemented in chromium) if a select renders as a listbox and you hover an option within, it gets a hover style. This feels misplaced as it's disabled and so you can't interact.

My proposal would be:

Before:

select option:enabled:hover {
  background-color: color-mix(in lab, currentColor 10%, transparent);
}
select option:enabled:active {
  background-color: color-mix(in lab, currentColor 20%, transparent);
}

After:

select:enabled option:enabled:hover {
  background-color: color-mix(in lab, currentColor 10%, transparent);
}
select:enabled option:enabled:active {
  background-color: color-mix(in lab, currentColor 20%, transparent);
}

[lukewarlow]

cc @josepharhar

[josepharhar]

Thanks for catching this, I didn't realize that the :enabled state didn't propagate from the select element to the options.

[josepharhar]

Alternatively, we could make the options not match :enabled when their select is disabled. This seems like it might just be a bug with :enabled?

[josepharhar]

Ah, option elements are not supposed to be disabled if their ancestor select is disabled: https://html.spec.whatwg.org/multipage/form-elements.html#concept-option-disabled

I'd be afraid of changing that.

I am supportive of making the UA stylesheet change in the OP.

[josepharhar]

Spec PRs:

• [css-forms-1] Fix select option enabled selector #13568
• Fix select option enabled selector whatwg/html#12205