[csswg-drafts] [appearance: base] Need pseudo classes for meter gauge regions (#13304)

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

== [appearance: base] Need pseudo classes for meter gauge regions ==
### What is the issue with the HTML Standard?

**What problem are you trying to solve?**

The [specs](https://www.w3.org/TR/css-forms-1/) do not define how the meter value is rendered based on it value .

**What solutions exist today?**

The value rentable is filled with a fixed color based on its gauge region:

1. red for even-less-good
2. yellow for suboptimum
3. green optimum

**How would you solve it?**

For `appearance: base` three pseudo classes can be added and used for the `fill` pseudo elements. For example these pseudo classes define glossy background colors for the gauge regions
```
    meter:even-less-good::fill {
        background: linear-gradient(to bottom, #f77, #fcc 20%, #d44 45%, #d44 55%, #f77);
    }
    meter:suboptimum::fill {
        background: linear-gradient(to bottom, #fe7, #ffc 20%, #db3 45%, #db3 55%, #fe7);
    }
    meter:optimum::fill {
        background: linear-gradient(to bottom, #ad7, #cea 20%, #7a3 45%, #7a3 55%, #ad7);
    }
```

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


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

Received on Tuesday, 6 January 2026 23:04:11 UTC