ลบเส้นขอบด้านในใน 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>