Webkit CSS per controllare il riquadro attorno al colore in un input [tipo = colore]?

Question

C'è uno stile CSS specifico per Webkit che mi consentirà di controllare il colore/dimensione/stile del riquadro attorno al colore in un input[type=color]? Sto già impostando il colore e il colore di sfondo dell'input in modo che appaia bene con un polyfill di compatibilità incrociata che sto utilizzando per Chrome e Firefox meno recenti. Ma ora che Chrome ha effettivamente un selettore di colori, c'è un riquadro attorno al colore che lascia una casella grigia da 1px fluttuante nel mezzo dell'input quando sia il colore che il colore di sfondo dell'input sono impostati sullo stesso colore. C'è qualche CSS da eliminare, sia impostando la larghezza della casella su 0, cambiando lo stile in none, o, nel peggiore dei casi, impostando il colore come il colore e il colore di sfondo?

In questa immagine, sto parlando della scatola grigia all'interno del bianco e al di fuori del verde:

ho trovato una soluzione, che è quello di impostare un alto imbottitura sufficiente che il box (il bordo grigio e il contenuto verde) è ridotto alla dimensione 0. Ma questo è veramente hacky, e non sembra molto buono in Firefox.

Answer 1

WebKit ha special CSS selectors che è possibile utilizzare per personalizzare i controlli modulo ma non sono ufficiali.
Un aggiornamento a WebKit in futuro probabilmente lo infrangerà.

Si prega di non usarlo per la produzione !!

ma sentitevi liberi di giocare con lui per progetti personali :)

Metodo 1

Utilizza selettori specifici WebKit per nascondere lo più la parte non colorata dell'ingresso.

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">

Metodo 2

nasconde l'ingresso di colore (opacity:0) e utilizza JavaScript per impostare lo sfondo del wrapper per il valore della ingresso.

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

una buona soluzione è:

1.wrap tuo color picker in un'etichetta. 2. Imposta la visibilità del selettore colori su falso. 3. Collegare il colore di sfondo dell'etichetta al valore del selettore di colori.

Ora, avete un facile stile di etichetta che se cliccato, apre il selettore di colori:

JSFiddle

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

Answer 3

Purtroppo, gli ingressi di colore sono piuttosto schizzinoso. Browser diversi li trattano in modo diverso. Ad esempio, Chrome ridimensiona l'input in base a width/height + border-width.Firefox, d'altra parte, utilizzerà il massimo di width/height e border-width. Ciò rende abbastanza difficile l'uguale spaziatura, con <input type=color> da solo.

Tuttavia, ciò che noi è in grado di fare do è rimuovere tutto tranne il colore scelto e lanciare attorno a esso un wrapper che sarà in grado di gestire in modo più prevedibile la spaziatura attorno all'input.

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

Sto usando una soluzione semplice, ma non così elegante, immagino. È possibile avvolgere l'input con un div e rendere l'input più grande del contenitore, dopo di che è possibile modellare il contenitore come si desidera. Puoi anche usare un'etichetta con un attributo for per creare un pulsante cliccabile con del testo.

ho fatto un esempio:

.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

mio metodo:

<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; 
    } 
} 

Ed è vista in questo modo: http://prntscr.com/gloozc

Ma se si preme Ctl + F5, tu guarda l'input originale per un momento.