Type = color içindeki iç kenarlığı kaldır

Question

Bir girdi olarak type = color kullandığımda, iki sınırı var. Border = none ayarı sadece dış sınırı kaldıracaktır. Ancak, içinde küçük bir tane var. Diğer birçok özelliği denedim ve hala aynı sonuç. İşte kodum:

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

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

İşte demek istediğim: https://ibb.co/N3nVFqn Temelde bu sınırı kaldırmak istiyorum.

Answer 1

::-webkit-color-swatchSeçiciyi kullanın .

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 için şunu kullanın ::-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

iki sınırı sıfıra değiştirirseniz ikisini de ortadan kaldırabilirsiniz.

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>