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?

Accepted Answer

Try the following CSS ruleset:

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

Remove the border inside color input

Solution

Problem