Re: [csswg-drafts] [css-forms-1] different border-radius on select vs picker looks janky (#13520)

The CSS Working Group just discussed `[css-forms-1] different border-radius on select vs picker looks janky`, and agreed to the following:

* `RESOLVED: ::file-picker-button matches button`
* `RESOLVED: the shape of the color picker will match the shape of a select`

<details><summary>The full IRC log of that discussion</summary>
&lt;jarhar> lwarlow: openui discussed and resolved to remove the border radius from select, the in page part, so the picker and in page part match<br>
&lt;jarhar> lwarlow: then i have follow up questions: what do we want to do regarding other controls<br>
&lt;jarhar> lwarlow: buttons we are in agreement need the border radius so they can be distinguished from text inputs<br>
&lt;jarhar> lwarlow: for color input, do we want border radius there? other place would be the file input button<br>
&lt;jarhar> fantasai: for the file input button, its a button so it should look like a button<br>
&lt;jarhar> fantasai: for the color input, id probably lean towards having border radius just to make it clear that its clickable<br>
&lt;jarhar> astearns: you could say the same thing about select<br>
&lt;jarhar> masonf: there is a difference that it has a picker icon<br>
&lt;jarhar> fantasai: youre not going to be confused about whether you can interact with it<br>
&lt;jarhar> lwarlow: that does lead to the question: if we have border radius on color, that does have a picker. are we going to run into the same situation?<br>
&lt;jarhar> ntim: were going to run into the same issue with the mismatched border radius<br>
&lt;jarhar> fantasai: so it needs to be a square<br>
&lt;jarhar> masonf: should you put a picker icon on it and then make it square?<br>
&lt;jarhar> lwarlow: color is an interesting one since its a rounded<br>
&lt;jarhar> lwarlow: it is a button for all intents and purposes<br>
&lt;fantasai> s/a rounded/often rounded/<br>
&lt;jarhar> lwarlow: i worry that if we resolve to do a border radius there then were going to have to think about the border radius doesnt match<br>
&lt;jarhar> lwarlow: unless we make the color input circular<br>
&lt;jarhar> annevk: is select not round as well?<br>
&lt;jarhar> lwarlow: it is currently, but it was discussed in openui and here to remove it from that because the border radius mismatched between the picker and the in page part<br>
&lt;jarhar> annevk: but thats weird because then we have a button that doesnt have a border radius. how do you know youre supposed to pick it?<br>
&lt;jarhar> masonf: the picker icon<br>
&lt;jarhar> masonf: or click into the text and find out that its a picker<br>
&lt;jarhar> annevk: i thought the issue was that the borders ended up touching<br>
&lt;jarhar> ntim: thats something else<br>
&lt;fantasai> https://github.com/w3c/csswg-drafts/issues/13520#issuecomment-3928257620<br>
&lt;jarhar> masonf: for this color picker, by the time we get to customizing the picker for color input we will be retired<br>
&lt;jarhar> masonf: for this one i think its ok to focus on the in page part<br>
&lt;jarhar> astearns: shall we resolve that the file picker button is round?<br>
&lt;jarhar> masonf: there is something inside of it that looks like a button, and then theres something else outside of it? were talking about the inner button, right?<br>
&lt;lwarlow> Yeah the ::file-selector-button<br>
&lt;jarhar> astearns: yes<br>
&lt;masonf> +1<br>
&lt;lwarlow> +1<br>
&lt;jarhar> fantasai: i would say that the file picker button should match button<br>
&lt;fantasai> RESOLVED: ::file-picker-button matches button<br>
&lt;lwarlow> It's file-selector-button btw not picker<br>
&lt;jarhar> astearns: should we also say that the color picker should be like a select?<br>
&lt;masonf> +1<br>
&lt;jarhar> astearns: if we say that the color picker should be like a select, then it can adapt if someone comes back and says the select needs to be rounded<br>
&lt;jarhar> annevk: if we enhance file input to have a dropdown for take a photo etc. then youd have the same kind of thing right?<br>
&lt;jarhar> astearns: thats a different control<br>
&lt;jarhar> dbaron: that ones also different since its ua generated<br>
&lt;lwarlow> q+<br>
&lt;jarhar> annevk: it could be stylable through a bunch of pseudo elements<br>
&lt;jarhar> masonf: thats even less likely than a customizable color picker<br>
&lt;fantasai> Options for color picker button: a) match select [currently square] b) match button [currently rounded] c) circular d) square<br>
&lt;jarhar> lwarlow: i was thinking of a middle step picker like datalist<br>
&lt;astearns> ack lwarlow<br>
&lt;jarhar> lwarlow: if file input had this middleman step, like take a photo now or open the native file picker<br>
&lt;jarhar> masonf: arent there security/privacy issues about that revealing whether theres a camera?<br>
&lt;jarhar> lwarlow: i think its important that these are consistent<br>
&lt;jarhar> annevk: can the picker be rounded?<br>
&lt;jarhar> fantasai: but datalist is square<br>
&lt;jarhar> masonf: text things are square and button things are rounded<br>
&lt;jarhar> annevk: does it look bad if its the other way around? where the picker is rounded and the in page thing is square. would that still look bad? i think the main thing that makes it look bad is no gap between them<br>
&lt;jarhar> lwarlow: i would argue that it doesn't look bad, and i think that the would you ship this question is moot because you can customize them<br>
&lt;jarhar> ntim: ideally they would be usable without any styles<br>
&lt;jarhar> lwarlow: its more impotant to be consistent between controls than to make sure that button and picker are perfect<br>
&lt;jarhar> masonf: these are design choices, people wont like them in 5 years<br>
&lt;jarhar> ntim: how about everything has a border radius, and we use background to differentiate buttons and inputs<br>
&lt;jarhar> ntim: hover state on buttons would become default state<br>
&lt;jarhar> lwarlow: using color alone for meaning is not good<br>
&lt;jarhar> ntim: im just throwing out ideas<br>
&lt;jarhar> lwarlow: the simplicity right now is nice<br>
&lt;jarhar> ntim: theres already one for  the hover state<br>
&lt;jarhar> lwarlow: the hover state is a derivation of the others<br>
&lt;jarhar> ntim: if you want a different background that would override the hover state<br>
&lt;jarhar> astearns: can we go back to the consistency argument and say that color should match select?<br>
&lt;jarhar> ntim: i think a square color input is probably not a problem, but im also not a ui expect<br>
&lt;jarhar> ntim: *expert<br>
&lt;jarhar> lwarlow: im fine with making them consistent<br>
&lt;masonf> +1<br>
&lt;jarhar> proposed resolution: the shape of the color picker will match the shape of a select<br>
&lt;jarhar> annevk: theres one other button that might make us lean towards squares which is the image button<br>
&lt;jarhar> annevk: if you give that one rounded corners, youre removing some content<br>
&lt;lwarlow> +1<br>
&lt;jarhar> lwarlow: i think that one not having rounded borders is ok becaues the actual rendering is based on the image<br>
&lt;jarhar> lwarlow: if people are using image buttons they deserve display:none!important<br>
&lt;jarhar> RESOLVED: the shape of the color picker will match the shape of a select<br>
</details>


-- 
GitHub Notification of comment by css-meeting-bot
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/13520#issuecomment-4091090153 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:41:13 UTC