Closed Bug 960984 Opened 10 years ago Closed 6 months ago

Implement <input type="color">: list attribute


(Core :: Layout: Form Controls, enhancement)




110 Branch
Tracking Status
firefox110 --- fixed


(Reporter: arnaud.bienner, Assigned: evilpie)


(Blocks 2 open bugs)


(Keywords: dev-doc-complete)


(4 files)

There was some ideas about how to implement this in bug 547004 comment 22 (attachment 437584 [details]), bug 547004 comment 70 and bug 547004 comment 71, at the end.

Quoting the (IMO) most interesting parts:

Mounir: "Then the user would click on it, if the list attribute is specified, it will show the colors and let the user choose another one with 'Other' which will show the color picker. Otherwise, it will directly show the color picker.
This is highly inspired from the Google's document."

Arnaud: "I think it will be nice to have something similar to Chrome and Opera: a drop-down list available with the list of colors when |list| attribute is specified.
I prefer the Chrome's one, as it displays the list only when |list| is specified, while Opera always displays it, with a default list of colors if |list| isn't specified, but I'm not sure this is really useful.
Or we can add those colors to the "custom colors" part of the color picker, if it has one?"

Mounir: "The UI you proposed look good to me. We might want to use the XUL color picker (that is basically a list of colors). We should probably involve the UI team though."
Blocks: 547004
As per suggestions above, I think there has to be an option to display list colours without 'Other' button too. To suggest only predefined colours to the users. Not sure if it's in par with the specs though.
IIRC the spec, we shouldn't restrict user choice, but only indicate some pre-defined/preferred values (but maybe I'm wrong or it has changed since. If you think it's the case, could you please point me out to the part which part of the spec says this?)
I cant point you to any specs to support my opinion. And I agree that by default we should not restrict users choices. However, in my experience I had situations where I had to build a color picker with predefined colors to prevent "colour soup" on site/service/CMS. Something like OSX Maveriks Finder context menu color tags are limited to seven colors only.
Bug 1016715 contains an example of how to use the datalist attribute + how is it rendered in Chrome (attachment 8429661 [details]).
See Also: → 1416363
Blocks: 1445061
No longer blocks: 547004
Another solution would be to display the predefined colors above or below the color picker. This avoids having to click twice to get the color picker, though it may require to create a separate color picker instead of using the system's one. Having said that, the Windows color picker already provides a palette of predefined colors in its color picker dialog. Not sure how it is in other systems, though.

Here's a screenshot of the dialog in Windows. And, of course, I meant custom colors and not predefined colors.

Severity: normal → S3
Assignee: nobody → evilpies
Attachment #9306594 - Attachment description: WIP: Bug 960984 - Implement the list attribute for <input type=color> → Bug 960984 - Implement the list attribute for <input type=color>. r?emilio
Blocks: 1805397

I'm glad to see someone is taking over this :)

Thanks Tom for your work on this!

Blocks: 1805616
Pushed by
Implement the list attribute for <input type=color>. r=emilio,geckoview-reviewers,m_kato
Closed: 6 months ago
Resolution: --- → FIXED
Target Milestone: --- → 110 Branch

MDN work can be tracked here

Hello, I am updating the MDN docs. I am not yet seeing the expected change in 110.0b9 beta (or even in nightly 111). This screenshot is on 110 beta. What am I missing to see the fix in Firefox beta? Thanks!

Flags: needinfo?(evilpies)

You are using macOS, see bug 1805397 for that.

Flags: needinfo?(evilpies)
You need to log in before you can comment on or make changes to this bug.