Allow `select[value=""]` as a selector

[bramus]

To style a <progress> element based on its value, it's possible to use a selector like this (demo on CodePen):

progress[value="50"] { /* ✅ Works */
	accent-color: lime;
}

For <select> elements that's not possible, though:

select[value="1"] { /* ❌ Doesn't work */
  …
}

We can work around this using :has() (demo on CodePen, use Safari TP):

select:has(option[value="1"]:checked) { /* ✅ Works */
   …
}

Would be nice if select[value="…"] worked as well, as it's easier to use. It's also a less specific selector of (0,1,1) (vs (0,2,2) using :has()).

I know that value is not an attribute of <select>, but perhaps this could be exposed similar to how JavaScript makes document.querySelector('select').value work?

[bramus]

Come to think of it: I don't think this is the correct location to file this? One of the whatwg repos seems like a better place?

[myakura]

there's a discussion in the WICG forum https://discourse.wicg.io/t/selector-based-on-non-attribute-value-maybe-value-pseudo/5718 so you might want to chime in.

[bramus]

Thanks @myakura.

Closing this issue and continuing the discussion over there.