Disable colorpicker for <input type="color"> in Google Chrome

Question

In Google Chrome, <input type="color"> creates an input with a big bar of color inside it and by default, opens a colorpicker (looks like it's OS dependent, mine has a Windows skin). I'm using a custom colorpicker globally that hooks into type="color" which looks like this in most browsers:

But in Chrome it looks like this:

If you've never seen it before, a bare-bones one looks like this (Windows 7 64bit Google Chrome Version 22.0.1229.79 m):

The custom colorpicker overrides the default one just fine, but the problem is the way it's displayed in Chrome. Another problem is that I can't seem to clear the value (have tried js), the default value is always #000000 and can't be set to an empty one.

It may or may not be true that if I don't want this behavior I shouldn't use type="color", but sometimes I find Chrome's UI a little too aggressive. Changing all the input types is not something I look forward to, and I'm not positive what else the app is doing with them so I could end up breaking something else. I've had similar issues with date pickers.

Is there any way to change this behavior in Chrome so I can have a normal text-like field? JavaScript/jQuery is an option, but if it can be done with CSS -webkit rules somehow that would be great.

Answer 1

You should not use type=color in this case. According to the standard, input[type=color] can't have an empty value.

If the value of the element is a valid simple color, then set it to the value of the element converted to ASCII lowercase; otherwise, set it to the string "#000000".

Answer 2

For the display issues, try overriding the default User Agent styles: http://jsfiddle.net/ngBpA/

input[type="color"] {
    -webkit-appearance: textfield;
}

input[type="color"]::-webkit-color-swatch-wrapper {
    display: none;
}

input[type="color"]::-webkit-color-swatch {
    display: none;
}​

I'm assuming your plugin automatically resizes the box.

User Agent Stylesheet: http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css