Live example: https://jsfiddle.net/trickyui/4hm2wyep/
First of all you have to add bootstrap and google material icons libraries locally or through CDN.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
HTML
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-addon color-palette" data-id="colors">
<i class="material-icons" data-id="cat_color">lens</i>
</div>
</div>
CSS
For styling the tool you have to add some CSS for styling the tool:
.color-palette{
position: relative;
}
.color-palette .color-box {
position: absolute;
padding: 6px;
right: 0px;
top: 100%;
z-index: 9;
min-width: 270px;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
-moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
-ms-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
-o-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
background-color: #ffffff;
border-radius: 4px;
border: 1px solid #f5f5f5;
}
.color-palette .color-box > div {
float: left;
width: 30px;
height: 30px;
border: 3px solid #ffffff;
border-radius: 50%;
margin: 6px;
}
JavaScript
// Colors
var colors = ['#ef4438', '#e71f63', '#8f4098', '#65499d', '#4555a5', '#478fcc', '#38a3dc', '#0abbd3', '#009688', '#4dae4c', '#8ac147', '#cddc35', '#fde937', '#fbc015', '#f8981f', '#f0592b', '#afbdc4', '#607d8b', '#bdaaa4', '#795649', '#eeeded', '#9d9d9d', '#616161', '#202020'];
var elements = document.querySelectorAll('[data-id="cat_color"]');
elements.forEach(function (e) {
e.addEventListener('click', function (ev) {
if (document.querySelectorAll('.color-box').length >= 0) {
document.querySelectorAll('.color-box').forEach(function (e) {
e.remove();
});
var node = document.createElement("DIV");
node.setAttribute('class', 'color-box');
node.setAttribute('id', 'color_box');
for (i = 0; i < colors.length; i++) {
var item = document.createElement('DIV');
item.setAttribute('class', 'color');
item.setAttribute('style', 'background-color:' + colors[i]);
item.setAttribute('onclick', 'setColor(this)');
node.appendChild(item);
}
e.parentNode.appendChild(node);
}
});
});
// select the color from palette
function setColor(color) {
color.parentNode.previousElementSibling.style.color = color.style.backgroundColor;
}
// remove the palette on document click
window.onload = function () {
document.onclick = function (e) {
var elem = document.getElementById('color_box');
if (elem) {
if (e.target.dataset.id !== 'cat_color' && e.target.id !== 'color_box') {
document.getElementById('color_box').remove();
}
}
}
}
For live example please go to this link: Live example: https://jsfiddle.net/trickyui/4hm2wyep/
