Take the 2-minute tour ×

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 for Firefox. But 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 let me 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 inside the white 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.

share|improve this question
Are you talking about the box to the left? –  DrinkJavaCodeJava Jun 23 '12 at 15:45
Yes. That's the actual input; the one on the right is the color picker. –  BrianFreud Jun 23 '12 at 15:47

2 Answers 2

up vote 3 down vote accepted

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 :)

Here is a demo I wrote: http://jsfiddle.net/uxW7H/1/
Method 1 uses the special selectors.
Method 2 is the recommended way to use custom buttons.

share|improve this answer
Wow, they make those hard to find. Thanks :D –  BrianFreud Jul 13 '12 at 15:17

a good workaround is to:

1.wrap your color picker in a label. 2.set the color picker's visibility to false. 3.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.

share|improve this answer

Your Answer


