删除 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>