MC Picker

Just add the script and the colorpicker will work on any input[type=color]. Even if you add them to DOM afterwards.

The implementation is minimal, the code is minimal, even the colorpicker itself is a mere six elements in a wrapper.

for example

installation

To install just do something like:

Then just import it somewhere:

import 'mc_picker'

customisation

You can easily adjust dimensions through CSS without affecting functionality:

.mcpicker { width: 20rem; height: 20rem; }
.mcpicker div { height: calc(100% - 5rem); }
.mcpicker div + div { height: 2rem; }
.mcpicker input { height: 3rem; }

This can also be done for a single instance when you use .mcpicker_[color input id] instead of .mcpicker: