When I use type=color as an input, it has two borders. Setting border=none will only remove the outer border. However, there is one tiny one inside. I tried many other properties and still the same result. Here is my code:
input[type="color"] {
appearance: none;
border: none;
padding:0;
height:50px;
width:50px;
}<input type="color" name="name1" id="name1" value="#ffffff">Here is what I mean: https://ibb.co/N3nVFqn I basically want to remove that border.
Use the ::-webkit-color-swatch selector.
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">For Mozilla Firefox, use ::-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">if you change the two borders to none you can eliminate both of them
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>