Rimuovi il bordo interno in tipo = colore

Question

Quando uso type = color come input, ha due bordi. L'impostazione border = none rimuoverà solo il bordo esterno. Tuttavia, c'è uno minuscolo all'interno. Ho provato molte altre proprietà e ancora lo stesso risultato. Ecco il mio codice:

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

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

Ecco cosa intendo: https://ibb.co/N3nVFqn Fondamentalmente voglio rimuovere quel bordo.

Answer 1

Usa il ::-webkit-color-swatchselettore.

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

Per Mozilla Firefox, utilizza ::-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 si modificano i due bordi in nessuno, è possibile eliminarli entrambi

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>