WebKit has special CSS selectors you can use to customize form controls but they aren’t official.
An update to WebKit in the future will probably break it.
Please don’t use it for production!!
But feel free to play with it for personal projects 🙂
Method 1
Uses webkit-specific selectors to mostly hide the non-colored part of the input.
input[type="color"] {
-webkit-appearance: none;
border: none;
width: 32px;
height: 32px;
}
input[type="color"]::-webkit-color-swatch-wrapper {
padding: 0;
}
input[type="color"]::-webkit-color-swatch {
border: none;
}<input type=color value="#ff0000">Method 2
Hides the color input (opacity:0) and uses JavaScript to set the background of the wrapper to the input’s value.
var color_picker = document.getElementById("color-picker");
var color_picker_wrapper = document.getElementById("color-picker-wrapper");
color_picker.onchange = function() {
color_picker_wrapper.style.backgroundColor = color_picker.value;
}
color_picker_wrapper.style.backgroundColor = color_picker.value;input[type="color"] {
opacity: 0;
display: block;
width: 32px;
height: 32px;
border: none;
}
#color-picker-wrapper {
float: left;
}<div id="color-picker-wrapper">
<input type="color" value="#ff0000" id="color-picker">
</div>