Webkit CSS, um die Box um die Farbe in einer Eingabe [Typ = Farbe] zu steuern?

Question

Gibt es einen Webkit-spezifischen CSS-Stil, mit dem ich die Farbe/Größe/Stil der Box um die Farbe in einem input[type=color] steuern kann? Ich stelle die Farbe und die Hintergrundfarbe der Eingabe bereits so ein, dass sie mit einem Cross-Compatibility-Polyfill, das ich für ältere Chrome und Firefox verwende, gut aussieht. Aber jetzt, wo Chrome tatsächlich einen Farbwähler hat, gibt es eine Box um die Farbe herum, die eine 1px graue Box in der Mitte der Eingabe schwebt, wenn sowohl die Farbe als auch die Hintergrundfarbe der Eingabe auf dieselbe Farbe eingestellt sind. Gibt es etwas CSS, um es loszuwerden, entweder indem man die Breite dieses Kastens auf 0 setzt, den Stil auf none ändert, oder schlimmstenfalls die Farbe auf die gleiche wie die Farbe und die Hintergrundfarbe einstellt?

In diesem Bild, ich spreche über das graue Feld innerhalb der weißen und außerhalb des grün:

ich eine Abhilfe gefunden habe, die eine ausreichend hohe Polsterung eingestellt ist, dass die Box (der graue Rand und grüne Inhalte) ist auf Größe 0 gequetscht. Aber das ist wirklich hacky und sieht in Firefox nicht sehr gut aus.

Answer 1

WebKit hat special CSS selectors Sie können Formularsteuerelemente anpassen, aber sie sind nicht offiziell.
Ein Update auf WebKit in der Zukunft wird es wahrscheinlich brechen.

Bitte nicht für die Produktion verwenden !!

Aber fühlen Sie sich frei mit ihm für persönliche Projekte zu spielen :)

Methode 1

Verwenden webkit spezifische Selektoren den nicht-farbigen Teil des Eingangs meist zu verstecken.

input[type="color"] { 
 
\t -webkit-appearance: none; 
 
\t border: none; 
 
\t width: 32px; 
 
\t height: 32px; 
 
} 
 
input[type="color"]::-webkit-color-swatch-wrapper { 
 
\t padding: 0; 
 
} 
 
input[type="color"]::-webkit-color-swatch { 
 
\t border: none; 
 
}

<input type=color value="#ff0000">

Methode 2

Verdeckt den Farbeingang (opacity:0) und verwendet JavaScript den Hintergrund der Umhüllung am Eingang des Wert einzustellen.

var color_picker = document.getElementById("color-picker"); 
 
var color_picker_wrapper = document.getElementById("color-picker-wrapper"); 
 
color_picker.onchange = function() { 
 
\t color_picker_wrapper.style.backgroundColor = color_picker.value;  
 
} 
 
color_picker_wrapper.style.backgroundColor = color_picker.value;

input[type="color"] { 
 
\t opacity: 0; 
 
\t display: block; 
 
\t width: 32px; 
 
\t height: 32px; 
 
\t border: none; 
 
} 
 
#color-picker-wrapper { 
 
\t float: left; 
 
}

<div id="color-picker-wrapper"> 
 
\t <input type="color" value="#ff0000" id="color-picker"> 
 
</div>

Answer 2

eine gute Abhilfe ist:

1.wrap Ihre Farbauswahl in einem Etikett. 2. Setzen Sie die Sichtbarkeit der Farbauswahl auf false. 3.binde die Hintergrundfarbe des Etiketts an den Wert des Farbwählers.

jetzt haben Sie eine einfache Beschriftung Stil, wenn darauf geklickt wird, öffnet die Farbauswahl:

JSFiddle

<label id="test_wrapper"><input id="inp" type="color"></label> 

Answer 3

Leider Farbeingänge sind sehr pingelig. Verschiedene Browser behandeln sie unterschiedlich. Zum Beispiel wird Chrome die Eingabe basierend auf width/height + border-width.Firefox verwendet dagegen das Maximum von width/height und border-width. Dies macht den gleichen Abstand ziemlich schwierig, mit <input type=color> allein.

Aber was wir können tun, entfernen Sie alles außer für die ausgewählte Farbe selbst, und werfen Sie einen Wrapper um ihn, der in der Lage sein wird, besser vorhersehbar den Abstand um den Eingang behandeln.

label.color-picker { 
 
    width: 150px; /* Width of color picker */ 
 
    border: 1px solid #ccc; /* Outer border */ 
 
    border-radius: 3px; /* Border radius of outer border */ 
 
    padding: 5px; /* Space between outer border and color picker */ 
 
    background: #fff; /* Color between outer border and color picker */ 
 

 
    display: block; /* Contain color picker within label */ 
 
} 
 

 
label.color-picker > span { 
 
    border: 1px solid #ccc; /* Border around color in color picker */ 
 

 
    display: block; /* Contain color picker within span */ 
 
} 
 

 
label.color-picker > span > input[type=color] { 
 
    height: 10px; /* Height of color picker */ 
 

 
    display: block; /* Avoids space above/below color picker */ 
 
    width: 100%; /* Fill available horizontal space */ 
 
    border: none; /* Remove browser's border */ 
 
    padding: 0px; /* Remove space around color picker in Chrome */ 
 
} 
 

 
/* Chrome styles */ 
 
label.color-picker > span > input[type=color]::-webkit-color-swatch-wrapper { 
 
    padding: 0; /* Remove browser's padding around color picker */ 
 
} 
 
label.color-picker > span > input[type=color]::-webkit-color-swatch { 
 
    border: none; /* Remove browser's border around color in color picker */ 
 
} 
 

 
/* Firefox styles */ 
 
label.color-picker > span > input[type=color]::-moz-color-swatch { 
 
    border: none; /* Remove browser's border around color in color picker */ 
 
} 
 
label.color-picker > span > input[type=color]::-moz-focus-inner { 
 
    border: none; /* Remove browser's padding around color in color picker */ 
 
    padding: 0; /* Remove browser's padding around color in color picker */ 
 
}

<label class="color-picker"> 
 
    <span> 
 
     <input type=color value="#ff00ff"> 
 
    </span> 
 
</label>

Answer 4

ich eine einfache Lösung verwenden, aber nicht so elegant, denke ich. Sie können die Eingabe mit einem Div umbrechen und die Eingabe größer als den Container machen. Danach können Sie den Container wie gewünscht gestalten. Sie können auch eine Beschriftung mit einem Attribut for verwenden, um eine anklickbare Schaltfläche mit Text zu erstellen.

.input-color-container { 
 
    position: relative; 
 
    overflow: hidden; 
 
    width: 40px; 
 
    height: 40px; 
 
    border: solid 2px #ddd; 
 
    border-radius: 40px; 
 
} 
 

 
.input-color { 
 
    position: absolute; 
 
    right: -8px; 
 
    top: -8px; 
 
    width: 56px; 
 
    height: 56px; 
 
    border: none; 
 
} 
 

 
.input-color-label { 
 
    cursor: pointer; 
 
    text-decoration: underline; 
 
    color: #3498db; 
 
}

<div class="input-color-container"> 
 
    <input id="input-color" value="#ed6868" class="input-color" type="color"> 
 
</div> 
 
<label class="input-color-label" for="input-color"> 
 
    I am a clickable label, try me 
 
</label>

Answer 5

Meine Methode:

<div class="user__colors"> 
    <label><input type="color"/></label> 
</div> 

input { 
    background-color: transparent; 
    border: none; 
    position: relative; 
    width: 80px; 
    height: 12px; 
    &:after { 
     position: absolute; 
     content: ''; 
     display: block; 
     width: 100%; 
     height: 100%; 
     background: url(../img/color-palette.jpg) repeat-y 0 0; 
     background-size: contain; 
     top: 0; 
     border-radius: 3px; 
    } 
} 

Und es wie folgt lesen:

Ich habe ein Beispiel gemacht http://prntscr.com/gloozc

Aber wenn Sie Ctl drücken + F5, du wirst sehen Sie die ursprüngliche Eingabe für einen Moment.