Loại bỏ đường viền bên trong trong type = color

Question

Khi tôi sử dụng type = color làm đầu vào, nó có hai đường viền. Đặt border = none sẽ chỉ xóa đường viền bên ngoài. Tuy nhiên, có một cái nhỏ bên trong. Tôi đã thử nhiều thuộc tính khác và vẫn cho kết quả tương tự. Đây là mã của tôi:

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

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

Đây là những gì tôi muốn nói: https://ibb.co/N3nVFqn Về cơ bản tôi muốn loại bỏ đường viền đó.

Answer 1

Sử dụng ::-webkit-color-swatchbộ chọ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">

Đối với Mozilla Firefox, hãy sử dụng ::-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

nếu bạn thay đổi hai đường viền thành không, bạn có thể loại bỏ cả hai đường viền đó

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>