Webkit CSS to control the box around the color in an input[type=color]?
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>A good workaround is to:
- Wrap your color picker in a label.
- Set the color picker's visibility to false.
- Bind the label's background color to the value of the color picker.
Now, you have an easy to style label that when clicked, opens your color picker. As discussed in comments, clicking a label activates the color picker without any javascript; it's the default behaviour.
$(document).on('change', 'input[type=color]', function() {
this.parentNode.style.backgroundColor = this.value;
});input {
visibility: hidden;
}
label {
background-color: black;
height: 32px;
width: 32px;
position: fixed;
}<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<label><input type="color"></label>JSFiddle: https://jsfiddle.net/9zhap7rb/3/
I am using a simple solution, but not so elegant, I guess. You can wrap the input with a div and make the input bigger than the container, after that you can shape the container as you want. You can also use a label with a for attribute to create a clickable button with some text.
I have made an example:
.input-color-container {
position: relative;
overflow: hidden;
width: 40px;
height: 40px;
border: solid 2px #ddd;
border-radius: 40px;
}
.input-color {
position: absolute;
right: -8px;
top: -8px;
width: 56px;
height: 56px;
border: none;
}
.input-color-label {
cursor: pointer;
text-decoration: underline;
color: #3498db;
}<div class="input-color-container">
<input id="input-color" value="#ed6868" class="input-color" type="color">
</div>
<label class="input-color-label" for="input-color">
I am a clickable label, try me
</label>