Entfernen Sie den inneren Rand in Typ = Farbe
Wenn ich type = color als Eingabe verwende, hat es zwei Ränder. Wenn Sie border = none setzen, wird nur der äußere Rand entfernt. Es gibt jedoch einen winzigen im Inneren. Ich habe viele andere Eigenschaften ausprobiert und trotzdem das gleiche Ergebnis erzielt. Hier ist mein Code:
input[type="color"] {
appearance: none;
border: none;
padding:0;
height:50px;
width:50px;
}
<input type="color" name="name1" id="name1" value="#ffffff">
Folgendes meine ich: https://ibb.co/N3nVFqn Ich möchte diese Grenze grundsätzlich entfernen.
Antworten
2 Spectric
Verwenden Sie den ::-webkit-color-swatch
Selektor.
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">
Verwenden Sie für 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
Wenn Sie die beiden Ränder in "Keine" ändern, können Sie beide entfernen
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>