Remove the border inside color input

Question

Demonstration: http://jsfiddle.net/WpJRk/

I have a color picker in my page using the new "color" type input:

<input type="color">

However, there is a black "border" inside the element which seems not able to be removed.

There is a 1px black box inside the field.

I don't really want the box inside. Doing this:

-webkit-appearance: none;

doesn't help.

Any solution?

Answer 1

Try the following CSS ruleset:

input::-webkit-color-swatch {
    border: none;
}

Answer 2

Your jsFiddle doesn't show a box. (At least for me)