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:

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

Chrome:

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

WebKit:

└─ '::-webkit-color-swatch-wrapper'
   └─ '::-webkit-color-swatch'
      └─ no-pseudo but used for alpha value display

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?