Question

Is there a Webkit-specific CSS style that will allow me to control the color/size/style of the box around the color in an input[type=color]?

I’m setting the color and background color of the input already so it looks good with a cross-compatibility polyfill I’m using for older Chrome and Firefox.

Now that Chrome actually has a color picker, there’s a box around the color which leaves a 1px grey box floating in the middle of the input when both color and background color of the input are set to the same color.

Is there some CSS to get rid of it, either by setting that box’s width to 0, changing the style to none, or, at worst, setting the color to the same as the color and background color?

---

In this image, I’m talking about the grey box around the white area and outside the green:

I’ve found one workaround, which is to set a high enough padding that the box (the grey border and green contents) is squished to size 0. But that’s really hacky, and doesn’t look very good over in Firefox.

Answer 1

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>