Usuń obramowanie wewnętrzne w type = color
Kiedy używam type = color jako danych wejściowych, ma on dwie ramki. Ustawienie border = none usunie tylko zewnętrzną granicę. Jednak w środku jest jeden malutki. Wypróbowałem wiele innych właściwości i wciąż ten sam wynik. Oto mój kod:
input[type="color"] {
appearance: none;
border: none;
padding:0;
height:50px;
width:50px;
}
<input type="color" name="name1" id="name1" value="#ffffff">
Oto o co mi chodzi: https://ibb.co/N3nVFqn Zasadniczo chcę usunąć tę granicę.
Odpowiedzi
2 Spectric
Użyj ::-webkit-color-swatch
selektora.
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">
W przypadku przeglądarki Mozilla Firefox użyj ::-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
jeśli zmienisz dwie granice na żadną, możesz wyeliminować obie
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>