How Can I Make Jscolor Colorpicker To Work On A Div?

I am using jscolor colorpicker which can only be attached to button element or input element.I want to use it for div.I tried this way- https://jsfiddle.net/anuranpal/Lead7c7q/43/

Solution 1:

Seems like the plugin doesn't support div, but using its api you can toggle colorpicker using code, if I got you correctly, here is my solution:

HTML

<div class="edit-color-container">
    <div id="styleSpan" style="background-image: none; background-color: rgb(186, 243, 255); color: rgb(0, 0, 0);"
    onclick="document.getElementById('color-picker').jscolor.show()"></div>
    <div id="btn" onclick="document.getElementById('color-picker').jscolor.show()">Edit</div>
    <input id="color-picker" class="jscolor {styleElement:'styleSpan',value:'DF068C'}"type="hidden">
</div>

CSS

.edit-color-container {
    border: 1px solid gainsboro;
    height: 70px;
    width: 70px;
    text-align: center;
}

#styleSpan {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    margin: 5px auto;
    cursor: pointer;
}

#btn {
    cursor: pointer;
}

body > div:last-child {
    margin: 50px0020px;
}

jsfiddle

Notice that you can use onclick on edit-color-container instead.