How to close an html5 color picker?

Question

In chrome on OSX when you select a color using a input with type=color:

 <input name="color" type="color" />

The color picker stays open even after choosing a color. It stays open even when you reload the page.

How can I close this picker popup when a color is chosen?

Answer 1

The color picker depends heavily on a per-browser, per-platform implementation. There's technically no way to close the color picker programatically as a cross-browser solution.

What you can do instead is using a Javascript solution to render your own, cross-platform color picker like jscolor or similar, those even have proper touch support.

Edit: In this list you can see there's no close event in the input type="color" . Further reading tells me that since this is just an input like a text input or range input, it's not something you can "control". The alternative may be creating your own.

Answer 2

This is a old question I stumbled on looking for the same answer. I ended up getting the desired effect by flipping the type attribute to 'text', then back to 'color'.

Figured I'd share in case anyone else is stumbling onto this same post.

// vanilla JS:
input.setAttribute('type','text');
input.setAttribute('type','color');

// jQuery:
$input.attr('type','text').attr('type','color');

 // see it in action! var input = document.getElementById('my-color'); // when you click the color picker, we'll run our code to close it after 2 seconds. input.addEventListener('focus', function() { setTimeout(()=>{ // toggle the type attribute to close the picker! input.setAttribute('type','text'); input.setAttribute('type','color'); }, 2000); });

 <input type="color" value="#ffaacc" id="my-color"/> <- Click me