Conseils CSS : comment styliser les cases à cocher à l'aide de CSS

Question

J'essaie de styliser une case à cocher en utilisant ce qui suit :

<input type="checkbox" style="border:2px dotted #00f;display:block;background:#ff0000;" />

Mais le style n'est pas appliqué. La case à cocher affiche toujours son style par défaut. Comment lui donner un style spécifique ?

P粉973899567 · Answer

En utilisant la nouvelle fonctionnalité fournie avec la pseudo-classe :after 和 :before, vous pouvez obtenir des effets de case à cocher personnalisés très intéressants. L'avantage est que vous n'avez rien d'autre à ajouter au DOM, juste la case à cocher standard.

Veuillez noter que cela ne fonctionne que sur les navigateurs compatibles. Je pense que cela est dû au fait que certains navigateurs ne vous permettent pas de définir :after 和 :before sur les éléments d'entrée. Malheureusement, cela signifie qu'actuellement, seuls les navigateurs WebKit sont pris en charge. Firefox + Internet Explorer permet toujours aux cases à cocher de fonctionner, mais sans style, qui devrait changer à l'avenir (le code n'utilise pas le préfixe du fournisseur).

Ceci est juste une solution de navigateur WebKit (Chrome, Safari, navigateurs mobiles)

Voir l'exemple Fiddle

$(function() {
  $('input').change(function() {
    $('div').html(Math.random());
  });
});

/* Main Classes */
.myinput[type="checkbox"]:before {
  position: relative;
  display: block;
  width: 11px;
  height: 11px;
  border: 1px solid #808080;
  content: "";
  background: #FFF;
}

.myinput[type="checkbox"]:after {
  position: relative;
  display: block;
  left: 2px;
  top: -11px;
  width: 7px;
  height: 7px;
  border-width: 1px;
  border-style: solid;
  border-color: #B3B3B3 #dcddde #dcddde #B3B3B3;
  content: "";
  background-image: linear-gradient(135deg, #B1B6BE 0%, #FFF 100%);
  background-repeat: no-repeat;
  background-position: center;
}

.myinput[type="checkbox"]:checked:after {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAQAAABuW59YAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAB2SURBVHjaAGkAlv8A3QDyAP0A/QD+Dam3W+kCAAD8APYAAgTVZaZCGwwA5wr0AvcA+Dh+7UX/x24AqK3Wg/8nt6w4/5q71wAAVP9g/7rTXf9n/+9N+AAAtpJa/zf/S//DhP8H/wAA4gzWj2P4lsf0JP0A/wADAHB0Ngka6UmKAAAAAElFTkSuQmCC'), linear-gradient(135deg, #B1B6BE 0%, #FFF 100%);
}

.myinput[type="checkbox"]:disabled:after {
  -webkit-filter: opacity(0.4);
}

.myinput[type="checkbox"]:not(:disabled):checked:hover:after {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAQAAABuW59YAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAB2SURBVHjaAGkAlv8A3QDyAP0A/QD+Dam3W+kCAAD8APYAAgTVZaZCGwwA5wr0AvcA+Dh+7UX/x24AqK3Wg/8nt6w4/5q71wAAVP9g/7rTXf9n/+9N+AAAtpJa/zf/S//DhP8H/wAA4gzWj2P4lsf0JP0A/wADAHB0Ngka6UmKAAAAAElFTkSuQmCC'), linear-gradient(135deg, #8BB0C2 0%, #FFF 100%);
}

.myinput[type="checkbox"]:not(:disabled):hover:after {
  background-image: linear-gradient(135deg, #8BB0C2 0%, #FFF 100%);
  border-color: #85A9BB #92C2DA #92C2DA #85A9BB;
}

.myinput[type="checkbox"]:not(:disabled):hover:before {
  border-color: #3D7591;
}

/* Large checkboxes */
.myinput.large {
  height: 22px;
  width: 22px;
}

.myinput.large[type="checkbox"]:before {
  width: 20px;
  height: 20px;
}

.myinput.large[type="checkbox"]:after {
  top: -20px;
  width: 16px;
  height: 16px;
}

/* Custom checkbox */
.myinput.large.custom[type="checkbox"]:checked:after {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGHRFWHRBdXRob3IAbWluZWNyYWZ0aW5mby5jb23fZidLAAAAk0lEQVQ4y2P4//8/AyUYwcAD+OzN/oMwshjRBoA0Gr8+DcbIhhBlAEyz+qZZ/7WPryHNAGTNMOxpJvo/w0/uP0kGgGwGaZbrKgfTGnLc/0nyAgiDbEY2BCRGdCDCnA2yGeYVog0Aae5MV4c7Gzk6CRqAbDM2w/EaQEgzXgPQnU2SAcTYjNMAYm3GaQCxNuM0gFwMAPUKd8XyBVDcAAAAAElFTkSuQmCC'), linear-gradient(135deg, #B1B6BE 0%, #FFF 100%);
}

.myinput.large.custom[type="checkbox"]:not(:disabled):checked:hover:after {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGHRFWHRBdXRob3IAbWluZWNyYWZ0aW5mby5jb23fZidLAAAAk0lEQVQ4y2P4//8/AyUYwcAD+OzN/oMwshjRBoA0Gr8+DcbIhhBlAEyz+qZZ/7WPryHNAGTNMOxpJvo/w0/uP0kGgGwGaZbrKgfTGnLc/0nyAgiDbEY2BCRGdCDCnA2yGeYVog0Aae5MV4c7Gzk6CRqAbDM2w/EaQEgzXgPQnU2SAcTYjNMAYm3GaQCxNuM0gFwMAPUKd8XyBVDcAAAAAElFTkSuQmCC'), linear-gradient(135deg, #8BB0C2 0%, #FFF 100%);
}




  
    Normal:
    
    
    
    
  
  
    Small:
    
    
    
    
  
  
    Large:
    
    
    
    
  
  
    Custom icon:

Flip violon de style Webkit supplémentaire

$(function() {
  var f = function() {
    $(this).next().text($(this).is(':checked') ? ':checked' : ':not(:checked)');
  };
  $('input').change(f).trigger('change');
});

body {
  font-family: arial;
}

.flipswitch {
  position: relative;
  background: white;
  width: 120px;
  height: 40px;
  -webkit-appearance: initial;
  border-radius: 3px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  outline: none;
  font-size: 14px;
  font-family: Trebuchet, Arial, sans-serif;
  font-weight: bold;
  cursor: pointer;
  border: 1px solid #ddd;
}

.flipswitch:after {
  position: absolute;
  top: 5%;
  display: block;
  line-height: 32px;
  width: 45%;
  height: 90%;
  background: #fff;
  box-sizing: border-box;
  text-align: center;
  transition: all 0.3s ease-in 0s;
  color: black;
  border: #888 1px solid;
  border-radius: 3px;
}

.flipswitch:after {
  left: 2%;
  content: "OFF";
}

.flipswitch:checked:after {
  left: 53%;
  content: "ON";
}



Webkit friendly mobile-style checkbox/flipswitch

P粉851401475 · Answer

Mise à jour :

Les réponses ci-dessous font référence à la situation avant que CSS 3 ne soit largement utilisé. Dans les navigateurs modernes, notamment Internet Explorer 9 et versions ultérieures, il est plus facile de créer des remplacements de cases à cocher avec vos styles préférés, sans utiliser JavaScript.

Voici quelques liens utiles :

Créez des cases à cocher de formulaire personnalisées en utilisant uniquement CSS李>
Générateur de cases à cocher CSS simple
Choses que vous pouvez faire avec Checkbox Hack
Utilisez CSS3 pour implémenter des cases à cocher et des boutons radio personnalisés
Comment styliser une case à cocher en utilisant CSS

Il convient de noter que le problème fondamental n’a pas changé. Vous ne pouvez toujours pas appliquer des styles (bordures, etc.) directement à l'élément de case à cocher et faire en sorte que ces styles affectent l'affichage de la case à cocher HTML. Ce qui a changé, cependant, c'est qu'il est désormais possible de masquer la case à cocher réelle et de la remplacer par votre propre élément de style, en utilisant uniquement du CSS. En particulier, puisque CSS prend désormais largement en charge les sélecteurs :checked, vous pouvez effectuer des remplacements reflétant correctement l'état coché de la case.

Ancienne réponse

Ceci est un article utile sur le style des cases à cocher. Fondamentalement, cet auteur a découvert que cela varie énormément d'un navigateur à l'autre et, peu importe la façon dont vous le stylisez, de nombreux navigateurs affichent toujours la case à cocher par défaut. Il n’y a donc vraiment pas de solution simple.

Il n'est pas difficile d'imaginer une solution de contournement où vous pourriez utiliser JavaScript pour superposer une image sur la case à cocher, puis cliquer sur l'image pour cocher la vraie case. Les utilisateurs sans JavaScript verront la case à cocher par défaut.

Modifié pour ajouter : voici un joli script qui fait cela pour vous ; il masque le véritable élément de case à cocher, le remplace par une portée stylisée et redirige l'événement de clic.