Eliminar el borde interior en type = color
Jan 27 2021
Cuando utilizo type = color como entrada, tiene dos bordes. Establecer border = none solo eliminará el borde exterior. Sin embargo, hay uno pequeño adentro. Probé muchas otras propiedades y seguí obteniendo el mismo resultado. Aquí está mi código:
input[type="color"] {
appearance: none;
border: none;
padding:0;
height:50px;
width:50px;
}
<input type="color" name="name1" id="name1" value="#ffffff">
Esto es lo que quiero decir: https://ibb.co/N3nVFqn Básicamente, quiero eliminar ese borde.
Respuestas
2 Spectric Jan 27 2021 at 06:06
Usa el ::-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">
Para 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">
1 DCR Jan 27 2021 at 06:27
si cambia los dos bordes a ninguno, puede eliminar ambos
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>