[csswg-drafts] [css-forms-1] Pseudo-elements and structure for `<input type="color">` (#11837)

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

== [css-forms-1] Pseudo-elements and structure for `<input type="color">` ==
CSS Forms 1 currently doesn't define a structure or pseudo-elements for `<input type="color">`, this issue is to discuss what these should be.

--------------------

There's currently two different structures across engines:

Firefox:

```html
└─ '::-moz-color-swatch'
```

WebKit / Chrome:

```
└─ '::-webkit-color-swatch-wrapper'
   └─ '::-webkit-color-swatch'
```

All of these are web exposed and can be styled (at least with a background-color per my testing).

The use case of the `::-webkit-color-swatch-wrapper` element is unclear to me. Given this I suspect we should align on the Firefox model of a single `::color-swatch` pseudo element.

This can potentially be defined to have a `background-color: control-value(<color>)` if we extend control-value to work for color inputs?

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


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

Received on Wednesday, 5 March 2025 18:48:40 UTC