How to position a color picker opened through HTML5's color input? - html

Question

Today I read about HTML5's color input and I thought I'd give it a try:
<input type="color" name="background" id="background" value="#ff0000">
When I click the input (in chrome and firefox, on windows), a color picker appears. However, it is positioned in the top left corner of my screen, not above the input.
Is this a known issue and will this be 'fixed' in the future? Is it possible to position the color picker through code? Or is this something that browsers can't do much about and that users have to live with?

Answer 1

The positioning of the input of type color is browser-specific implementation, in the official documentation there is no given rule for user-agents (i.e. browsers) how to position it over the page's element. This makes custom positioning via CSS for example, or JavaScript not possible.
However, there are some other rules (for example, there is always a color picked, and there is no way to set the value to the empty string.)
Keep in mind when using the input of type color, that Internet Explorer and Safari browsers do not support it yet.

Answer 2

One more caveat is that when creating a custom picker control, use 0-size instead of display: none. Otherwise browser will place the picker in the corner (out of the Visual DOM tree).
<input type="color" width="0" height="0" value="#ff0000">
<button onClick="/* logic to show the picker */">Pick a colour</button>

Answer 3

I had this same question. I wanted to create a Theme editor and wanted to do this. Like the VS Code when editing a CSS file.
I figured out some strategies for solving this problem:
Method A using positioned iframe and signalling changes between iframe and parent.
Figure out the absolute screen location where you want your picker to open.
Create a <input type=hidden with an id like signalColor. And monitor this id for changes.
Move a hidden <div with the absolute position and size where you need the color picker.
Place an iframe in the <div with the code to create a colour picker. Also, in the Iframe you will need an input with your initial color.
Set the color of the initial color within the iframe and then show the div.
Use the following post to figure out when to signal the new color or if cancelled.
https://lugolabs.com/articles/how-to-use-a-color-picker-in-javascript
Method B using window.open(…)+ Ajax
Figure out the absolute screen location where you want your picker to open.
Generate a random token file name.
Open a new Window with needed position and size, loading in any into the HTML you will need. Embed in the script the token file name and pass ajax credentials you will be using. Add references to JQuery, etc. Create a loop in the parent DOM to detect when the window is closed.
When the operator clicks on a new selection detect the click and capture the new colour value.
Send an ajax message with the new colour to the host. Saving the value in the token file.
Then close the window which then triggers the parent to use ajax to request the token file.

Answer 4

Here's a hacked solution which worked for me.
After page load ("AfterViewInit" in Angular), I picked all inputs with the type color.
One of them should be the color input I was applying to. For me it was the first one.
Then, I changed its style attribute.
See the code below:
let colorPickerInputs = document.querySelectorAll('input[type=color]');
if (colorPickerInputs)
colorPickerInputs[0].setAttribute('style', 'position: absolute; top: 20px; opacity: 0;');