[csswg-drafts] [css-forms-1] Styles for color input (#12142)

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

== [css-forms-1] Styles for color input ==
As currently specced the color input never renders the actual chosen color. We need to specify styles specific to the color input. This will track that.

Proposed additions

```css
::color-swatch {
    /* Ensures contrast between chosen color and button background (which by default is transparent so the page background) */
    border: 1px solid currentColor;

    /* Enforces a reasonable minimum size */
    min-inline-size: 2em; 
    min-block-size: 1em;

    /* Ensures it fills it's parent container */
    flex: 1; 

    /* Should this be here? It's designed to prevent forced dark mode from messing with the colour? */
    color-scheme: light only;

    /* This uses a linear gradient to handle showing the alpha of the control value. */
    background: linear-gradient(control-value(<color>)),
      linear-gradient(to bottom right, black 50%, white 50%);
}
```

This should result in the below rendering given `<input type="color" value="color(srgb 0 1 0 / 0.75)" alpha>`

<img width="68" alt="Image" src="https://github.com/user-attachments/assets/55a04dbe-fbf1-47eb-9e24-051867dbe706" />

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


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

Received on Thursday, 1 May 2025 15:47:09 UTC