How to get the same <input type="color"> value change functionality across browsers?

Question

I'm working on a web app that uses javascript to do something on the page when a user chooses a color from an <input type="color">.

The problem is that <input type="color"> behaves differently on Chrome, Firefox, and Safari:

• on Safari, when a user clicks <input type="color">, an external colorpicker window does not pop up
• on Firefox, an external color picker control window pops up, but the input element's value only changes when 1) a value change has happened, and 2) when the colorpicker window is then subsequently closed (EDIT ...on a Mac; on Windows the user has to click the "OK" button to confirm the value change, not just close the window)

Chrome's behavior is ideal:

• when clicked, the <input type="color"> provides a colorpicker pop up window
• any time a value is changed inside the colorpicker pop up window, the input element's value changes (before the colorpicker window is closed)

Here is a codepen with a vanilla <input type="color"> that demonstrates this problem when checked on all 3 browsers.

How to use javascript and/or css to get the <input type="color"> Chrome behavior out of Firefox and Safari?

EDIT The crazy thing about Safari is, their docs say that the color input type is:

An input control for specifying a RGB color value. The user can select a color from a color well

Answer 1

I am afraid we are not there yet to use this input type in development. Your best solution is to use a cross browser plugin.

You can see the support of the color element at http://caniuse.com/#search=color