Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

html

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?

like image 976
David Bulté Avatar asked May 15 '14 11:05

David Bulté


People also ask

How do you integrate color picker in HTML?

To add a color picker in an HTML page, use an <input> tag with type = 'color' . The initial value can be set using the value property. This value needs to be set in hexadecimal because colors are represented as six-digit hexadecimal values following a hashtag ( # ).

Can I make the HTML color input only display hex?

You can't make it only display hex, but whatever mode the user chooses the value is stored as hex.

How do you change the input type color in HTML?

The <input type="color"> defines a color picker. The default value is #000000 (black). The value must be in seven-character hexadecimal notation.


2 Answers

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.

like image 52
Bud Damyanov Avatar answered Oct 21 '22 14:10

Bud Damyanov


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.

  1. Figure out the absolute screen location where you want your picker to open.
  2. Create a <input type=hidden with an id like signalColor. And monitor this id for changes.
  3. 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.
  4. Set the color of the initial color within the iframe and then show the div.
  5. 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

  1. Figure out the absolute screen location where you want your picker to open.
  2. Generate a random token file name.
  3. 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.
  4. When the operator clicks on a new selection detect the click and capture the new colour value.
  5. Send an ajax message with the new colour to the host. Saving the value in the token file.
  6. Then close the window which then triggers the parent to use ajax to request the token file.
like image 26
nick-pt Avatar answered Oct 21 '22 13:10

nick-pt