Delete border inside color input

Question

Demo: http://jsfiddle.net/WpJRk/

I have a color picker on my page using a new input of type "color":

<input type="color">

However, there is a black “border” inside the element, which, it seems, cannot be removed.

There is a 1px black box in the box.

I do not need a box inside. Performing this action:

-webkit-appearance: none;

Does not help.

Any solution?

Answer 1

Try the following set of CSS rules:

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

Answer 2

Your jsFiddle does not display a field. (At least for me)

Answer 3

?

http://jscolor.com/

Answer 4

I do not think that you can do what you are trying to do.

<input type="color">is intended to display a color choice, so for an element to indicate what it does by default is black. You can change the color value, as you did, to match the background color ( input type="color">cannot have an empty value), but you still have to struggle with the frame.