web-dev-qa-db-fra.com

Webkit CSS pour contrôler la case autour de la couleur dans une entrée [type = couleur]?

Existe-t-il un style CSS spécifique à Webkit qui me permettra de contrôler la couleur/taille/style de la boîte autour de la couleur dans un input[type=color]? Je règle déjà la couleur et la couleur d'arrière-plan de l'entrée, donc cela semble bon avec un polyfill de compatibilité croisée que j'utilise pour les anciens Chrome et Firefox. Mais maintenant que Chrome a en fait un sélecteur de couleurs, il y a une boîte autour de la couleur qui laisse une boîte grise 1px flottant au milieu de l'entrée lorsque la couleur et la couleur d'arrière-plan de l'entrée sont définies sur la même couleur. Y a-t-il du CSS pour s'en débarrasser, soit en définissant la largeur de cette boîte à 0, en changeant le style en none, ou, au pire, en définissant la couleur sur la même couleur que la couleur et la couleur d'arrière-plan?

Dans cette image, je parle de la boîte grise à l'intérieur du blanc et à l'extérieur du vert:

Screenshot of color picker

J'ai trouvé une solution de contournement, qui consiste à définir un rembourrage suffisamment élevé pour que la boîte (la bordure grise et le contenu vert) soit écrasée à la taille 0. Mais c'est vraiment hacky et n'a pas l'air très bien dans Firefox.

csshtml5google-chromewebkitcolor-picker
30
BrianFreud

WebKit a sélecteurs CSS spéciaux vous pouvez utiliser pour personnaliser les contrôles de formulaire mais ils ne sont pas officiels.
Une mise à jour de WebKit à l'avenir le cassera probablement.

Veuillez ne pas l'utiliser pour la production !!

Mais n'hésitez pas à jouer avec pour des projets personnels :)

Méthode 1

Utilise des sélecteurs spécifiques au webkit pour masquer principalement la partie non colorée de l'entrée.

input[type="color"] {
        -webkit-appearance: none;
        border: none;
        width: 32px;
        height: 32px;
}
input[type="color"]::-webkit-color-swatch-wrapper {
        padding: 0;
}
input[type="color"]::-webkit-color-swatch {
        border: none;
}
<input type=color value="#ff0000">

Méthode 2

Masque l'entrée de couleur (opacity:0) et utilise JavaScript pour définir l'arrière-plan de l'encapsuleur à la valeur de l'entrée.

var color_picker = document.getElementById("color-picker");
var color_picker_wrapper = document.getElementById("color-picker-wrapper");
color_picker.onchange = function() {
        color_picker_wrapper.style.backgroundColor = color_picker.value;    
}
color_picker_wrapper.style.backgroundColor = color_picker.value;
input[type="color"] {
        opacity: 0;
        display: block;
        width: 32px;
        height: 32px;
        border: none;
}
#color-picker-wrapper {
        float: left;
}
<div id="color-picker-wrapper">
        <input type="color" value="#ff0000" id="color-picker">
</div>
46
Keishi Hattori

Une bonne solution consiste à:

  1. Enveloppez votre sélecteur de couleurs dans une étiquette.
  2. Définissez la visibilité du sélecteur de couleurs sur faux.
  3. Liez la couleur d'arrière-plan de l'étiquette à la valeur du sélecteur de couleurs.

Maintenant, vous avez une étiquette facile à styliser qui, lorsque vous cliquez dessus, ouvre votre sélecteur de couleurs. Comme indiqué dans les commentaires, cliquer sur une étiquette active le sélecteur de couleurs sans aucun javascript; c'est le comportement par défaut.

$(document).on('change', 'input[type=color]', function() {
  this.parentNode.style.backgroundColor = this.value;
});
input {
  visibility: hidden;
}

label {
  background-color: black;
  height: 32px;
  width: 32px;
  position: fixed;
}
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<label><input type="color"></label>

JSFiddle: https://jsfiddle.net/9zhap7rb/3/

9
CodeToad

J'utilise une solution simple, mais pas si élégante, je suppose. Vous pouvez envelopper l'entrée avec un div et rendre l'entrée plus grande que le conteneur, après cela, vous pouvez façonner le conteneur comme vous le souhaitez. Vous pouvez également utiliser une étiquette avec un attribut for pour créer un bouton cliquable avec du texte.

J'ai fait un exemple:

.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>
5
Henrique Rotava

Malheureusement, les entrées de couleur sont assez pointilleuses. Différents navigateurs les traitent différemment. Par exemple, Chrome dimensionnera l'entrée en fonction de width/height + border-width. Firefox, en revanche, utilisera le maximum de width/height et border-width. Cela rend un espacement égal assez difficile, avec <input type=color> par lui-même.

Cependant, ce que nous pouvons faire, c'est tout supprimer sauf la couleur choisie elle-même, et jeter un wrapper autour d'elle qui sera en mesure de gérer de manière plus prévisible l'espacement autour de l'entrée.

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>
4
0b10011

C'est ainsi que je l'ai fait récemment pour un projet artistique. Je suis un débutant, alors faites-moi savoir si j'ai fait horriblement mal.

input[type=color]{
        width: 40px;
        height: 40px;
        border: none;
        border-radius: 40px;
        background: none;
}
input[type="color"]::-webkit-color-swatch-wrapper {
        padding: 0;
}
input[type="color"]::-webkit-color-swatch {
        border: solid 1px #000; /*change color of the swatch border here*/
        border-radius: 40px;
}
<input type="color" value="#C899F5">
3
Terran Webb