Background:
The <input type=color> form control allows selecting a color. User agents typically implement this using a pop-up color picker. In some user agents, the picker includes an "eyedropper" control, either implemented by the UA or by the OS-provided picker.
Example:
The eyedropper control causes the app to enter a modal state; the cursor changes to an eyedropper; when the cursor is clicked - on any part of the desktop, whether over the page, the UA, or another application - the underlying color is selected.
Feature Request and Use Case:
We've had feature requests against Chrome from numerous developers of web-based design tools. (tracking bug) to provide the ability to show an eyedropper without the pop-up color picker. This would allow such web applications to provide the same functionality as native desktop applications, integrating an eyedropper into the color picker into their UI. Here's the UI for a typical desktop native app (Gimp) showing an eyedropper control:
Proposal
This functionality could be added progressively by adding an attribute to <input type=color> that effectively "skips" the popup if supported. For example:
<input type=color eyedropper>
- It gracefully falls back to a semantically identical control on older UAs.
- If not supported by the UA on that platform (e.g. one without cursors, etc), it behaves exactly as
<input type=color>.
- Web apps can customize the UI by creating a hidden element and calling
click() as is common for other form controls (like <input type=file>)
- Feature detection can be done by examining
HTMLInputElement.prototype.
... but other proposals to support the use case are welcome.
Chrome is interesting in implementing support for this use case.
Background:
The
<input type=color>form control allows selecting a color. User agents typically implement this using a pop-up color picker. In some user agents, the picker includes an "eyedropper" control, either implemented by the UA or by the OS-provided picker.Example:
The eyedropper control causes the app to enter a modal state; the cursor changes to an eyedropper; when the cursor is clicked - on any part of the desktop, whether over the page, the UA, or another application - the underlying color is selected.
Feature Request and Use Case:
We've had feature requests against Chrome from numerous developers of web-based design tools. (tracking bug) to provide the ability to show an eyedropper without the pop-up color picker. This would allow such web applications to provide the same functionality as native desktop applications, integrating an eyedropper into the color picker into their UI. Here's the UI for a typical desktop native app (Gimp) showing an eyedropper control:
Proposal
This functionality could be added progressively by adding an attribute to
<input type=color>that effectively "skips" the popup if supported. For example:<input type=color eyedropper><input type=color>.click()as is common for other form controls (like<input type=file>)HTMLInputElement.prototype.... but other proposals to support the use case are welcome.
Chrome is interesting in implementing support for this use case.