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

Jan 27 2021

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 đó.

Trả lời

2 Spectric Jan 27 2021 at 06:06

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

1 DCR Jan 27 2021 at 06:27

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>

© Copyright 2021 - 2022 | vngogo.com | All Rights Reserved