- From: CSS Meeting Bot via GitHub <noreply@w3.org>
- Date: Thu, 19 Mar 2026 15:25:42 +0000
- To: public-css-archive@w3.org
The CSS Working Group just discussed `[css-forms-1] Styles for color input`, and agreed to the following:
* `RESOLVED: Use background: linear-gradient() as in issue.`
* `RESOLVED: ::color-swatch { forced-color-adjust: none; }`
* `RESOLVED: input[type=color] { padding: 0; overflow: clip; } ::color-swatch { size: stretch; border: none; }`
<details><summary>The full IRC log of that discussion</summary>
<jarhar> ntim: looks ok. maybe one thing to discuss is the shape. do we want it to be square or rectangular, but honestly looks fine<br>
<masonf> q+<br>
<jarhar> ntim: maybe anne has thoughts since he has worked more on colors inputs<br>
<jarhar> annevk: this looks fine i guess. i dont think we have a strong opinion on this as long as its reasonable<br>
<astearns> ack masonf<br>
<jarhar> masonf: the double border looks kind of funny. usually the color fills the entire thing<br>
<jarhar> masonf: thats personal preference though, dont care much<br>
<jarhar> masonf: color scheme and forced color adjust - is it the right thing to override that?<br>
<jarhar> lwarlow: the color here has meaning, its not just a visual. in this case, forced color adjust is the right thing<br>
<fantasai> +1<br>
<jarhar> masonf: color scheme matters if you have double borders<br>
<jarhar> lwarlow: color scheme light only is from the chromium ua style sheet because dark mode will mess with the colors<br>
<jarhar> lwarlow: it might mess with the renddering of the background color<br>
<jarhar> ntim: i dont think we need a color scheme here<br>
<jarhar> ntim: its not using a system color, its using white<br>
<jarhar> lwarlow: chromiums force dark mode will just mess with rendering in general<br>
<jarhar> masonf: if its an implementation thing we can fix it<br>
<jarhar> lwarlow: its standardized in css that ua can force it<br>
<jarhar> annevk: and they can mess with the colors?<br>
<jarhar> lwarlow: yes<br>
<jarhar> lwarlow: theres force colors which is windows high contrast mode<br>
<jarhar> lwarlow: and theres ? in the color adjust spec<br>
<jarhar> lwarlow: its not shipped<br>
<jarhar> annevk: maybe this is something for weinig to double check but seems fine if what you say is true. i like masons idea of taking the inner button and making it bigger. that might look better? we dont really need the separation i think.<br>
<jarhar> lwarlow: the reason for the border on the inner one is for contrast between the background color and the chosen color<br>
<jarhar> annevk: i could see doing a thicker outer border for this control. you could do 2 or 3 px for more separation<br>
<jarhar> lwarlow: if we have the padding<br>
<jarhar> annevk: i would remove all the padding<br>
<jarhar> lwarlow: so the color swatch would be 100%<br>
<jarhar> masonf: the black or the white is the only way to guarantee contrast. maybe 1px of each is enough?<br>
<jarhar> ntim: that would be like 1px padding<br>
<jarhar> masonf: yes<br>
<astearns> ack fantasai<br>
<jarhar> fantasai: if we want to have the swatch fill the button that wouldnt be unreasonable<br>
<jarhar> ntim: thats a good question for openui, whats a reasonable looking color swatch<br>
<jarhar> fantasai: ? rendering woudl be to fill the button entirely. i dont think you need a special border since the author should take care of it<br>
<jarhar> fantasai: the green will just fill the entire rounded rectangle or whatever the button looks like<br>
<jarhar> fantasai: set the inner one to stretch. no padding, no border<br>
<jarhar> fantasai: overflow clip on the button so it doesn't poke out of rounded corners<br>
<masonf> proposed resolution: what Elika just said<br>
<jarhar> fantasai: i think that would be straightforward<br>
<jarhar> lwarlow: most of them are a little circle with the thing filling it, so i think thats fine<br>
<jarhar> ntim: do we have research on color pickers in general?<br>
<jarhar> lwarlow: yes for picker but not for in page button<br>
<jarhar> masonf: nothing in openui<br>
<jarhar> astearns: we have gone through several questions about this input. the original question is about rendering the color<br>
<jarhar> astearns: we could resolve on that with the caveat that color scheme might or might not be necessary<br>
<jarhar> annevk: let svgeesus say something<br>
<jarhar> astearns: yes and ask for more input on necessity of color scheme<br>
<jarhar> annevk: so mainly are we ok with using a gradient. seems fine to me<br>
<jarhar> proposed resolution: accept proposal in the issue for rendering the color<br>
<fantasai> PROPOSED: no padding or inner border, ::color-swatch { size: stretch; forced-color-adjust: none; background: per issues; }<br>
<lwarlow> +1<br>
<jarhar> ntim: and do research in openui<br>
<jarhar> masonf: we could go further and do the thing that elika suggested<br>
<masonf> +1<br>
<jarhar> astearns: lets record the resolution to use the gradient<br>
<fantasai> RESOLVED: Use background: linear-gradient() as in issue.<br>
<masonf> I guess that's +1 on the first one<br>
<jarhar> astearns: on padding or inner border, should we take to open ui or record resolution?<br>
<jarhar> fantasai: i think record resolution<br>
<jarhar> ntim: lets take suggestions and then have openui also review that<br>
<jarhar> annevk: openui should be here right?<br>
<jarhar> masonf: more people join the regular openui one<br>
<fantasai> PROPOSED: input[type=color] { padding: 0; overflow: clip; } ::color-swatch { size: stretch; }<br>
<lwarlow> +1<br>
<jarhar> masonf: im fine resolving that and taking it to openui to look for problems<br>
<fantasai> PROPOSED: ::color-swatch { forced-color-adjust: none; }<br>
<lwarlow> +1<br>
<masonf> +1<br>
<fantasai> s/stretch;/stretch; border: none;/<br>
<fantasai> (for clarity)<br>
<fantasai> RESOLVED: ::color-swatch { forced-color-adjust: none; }<br>
<fantasai> RESOLVED: input[type=color] { padding: 0; overflow: clip; } ::color-swatch { size: stretch; border: none; }<br>
</details>
--
GitHub Notification of comment by css-meeting-bot
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/12142#issuecomment-4090940731 using your GitHub account
--
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Thursday, 19 March 2026 15:25:42 UTC