[csswg-drafts] Make the selector `select[value=""]` work (#7042)

bramus has just created a new issue for https://github.com/w3c/csswg-drafts:

== Make the selector `select[value=""]` work ==
To style a `<progress>` element based on its value, it's possible to use a selector like this _([demo on CodePen](https://codepen.io/bramus/pen/NWwgZLZ))_:

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

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

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

We can work around this using `:has()` _([demo on CodePen, use Safari TP](https://codepen.io/bramus/pen/exrYVW))_:

```css
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 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?

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7042 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Saturday, 12 February 2022 15:47:01 UTC