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>