Remova a borda interna em type = color

Question

Quando eu uso type = color como entrada, ele tem duas bordas. Definir border = none apenas removerá a borda externa. No entanto, há um minúsculo dentro. Tentei muitas outras propriedades e ainda o mesmo resultado. Aqui está o meu código:

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

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

Aqui está o que quero dizer: https://ibb.co/N3nVFqn Basicamente, quero remover essa fronteira.

Answer 1

Use o ::-webkit-color-swatchseletor.

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">

Para Mozilla Firefox, use ::-moz-color-swatch:

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

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

Answer 2

se você alterar as duas bordas para nenhuma você pode eliminar ambas

input[type="color"] {
    appearance: none;
    border:solid 1px red;
    padding:0;
    height:50px;
    width:50px;
    background:white;
    box-sizing:unset;
}



input[type="color" i]::-webkit-color-swatch {
border:solid 1px blue;
}

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