Entfernen Sie den inneren Rand in Typ = Farbe

Jan 27 2021

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 Jan 27 2021 at 06:06

Verwenden Sie den ::-webkit-color-swatchSelektor.

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 Jan 27 2021 at 06:27

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>