Supprimer la bordure intérieure dans type = color

Question

Lorsque j'utilise type = color comme entrée, il a deux bordures. Le réglage border = none supprimera uniquement la bordure extérieure. Cependant, il y en a un minuscule à l'intérieur. J'ai essayé de nombreuses autres propriétés et toujours le même résultat. Voici mon code:

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

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

Voici ce que je veux dire: https://ibb.co/N3nVFqn Je veux essentiellement supprimer cette frontière.

Answer 1

Utilisez le ::-webkit-color-swatchsélecteur.

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

Pour Mozilla Firefox, utilisez ::-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

si vous modifiez les deux bordures sur aucune, vous pouvez les éliminer toutes les deux

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>