html - Remove inside border in type=color

Question

When I use type=color as an input, it has two borders. Setting border=none will only remove the outer border. However, there is one tiny one inside. I tried many other properties and still the same result. Here is my code:

input[type="color"] {
    appearance: none;
    border: none;
    padding:0;
    height:50px;
    width:50px;
}

<input type="color" name="name1" id="name1" value="#ffffff">

question from:https://stackoverflow.com/questions/65910526/remove-inside-border-in-type-color

Answer 1

Use the ::-webkit-color-swatch selector.

input[type="color"] {
    appearance: none;
    border: none;
    padding:0;
    height:50px;
    width:50px;
}
::-webkit-color-swatch{
  border:none;
}

<input type="color" name="name1" id="name1" value="#ffffff">