type = color에서 내부 테두리 제거
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 기본적으로 그 테두리를 제거하고 싶습니다.
답변
2 Spectric
::-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">
1 DCR
두 테두리를 없음으로 변경하면 둘 다 제거 할 수 있습니다.
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>