Удалить внутреннюю границу в type = color

Question

Когда я использую type = color в качестве входных данных, у него есть две границы. Установка border = none удалит только внешнюю границу. Однако внутри есть один крохотный. Я пробовал много других свойств и все тот же результат. Вот мой код:

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

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

Вот что я имею в виду: https://ibb.co/N3nVFqn Я в основном хочу удалить эту границу.

Answer 1

Используйте ::-webkit-color-swatchселектор.

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

Для Mozilla Firefox используйте ::-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

если вы измените две границы на отсутствие, вы можете удалить их обе

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>