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 puis-je lui donner le style spécifié?

MISE À JOUR:

La réponse ci-dessous fait référence à l'état des choses avant la disponibilité généralisée de CSS 3. Dans les navigateurs modernes (y compris Internet Explorer 9 et versions ultérieures), il est plus simple de créer des remplacements de cases à cocher avec votre style préféré, sans utiliser JavaScript.

Voici quelques liens utiles:

• Création de cases à cocher de formulaire personnalisé avec Just CSS
• Générateur de cases à cocher CSS facile
• Choses que vous pouvez faire avec le hack de case à cocher
• Implémentation de cases à cocher et de boutons radio personnalisés avec CSS3
• Comment styliser une case à cocher avec CSS

Il convient de noter que la question fondamentale n'a pas changé. Vous ne pouvez toujours pas appliquer de styles (bordures, etc.) directement à l'élément de case à cocher et 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 un élément de style personnel, en utilisant uniquement CSS. En particulier, parce que CSS dispose désormais d'un :checkedsélecteur largement pris en charge , vous pouvez faire en sorte que votre remplacement reflète correctement l'état coché de la boîte.

RÉPONSE ANCIENNE

Voici un article utile sur les cases à cocher de style . Fondamentalement, cet écrivain a constaté qu'elle varie énormément d'un navigateur à l'autre et que de nombreux navigateurs affichent toujours la case à cocher par défaut, quel que soit le style. Il n'y a donc vraiment pas de moyen facile.

Il n'est pas difficile d'imaginer une solution de contournement dans laquelle vous utiliseriez JavaScript pour superposer une image sur la case à cocher et si des clics sur cette image provoquaient la vérification de la vraie case à cocher. Les utilisateurs sans JavaScript verront la case par défaut.

Modifié pour ajouter: voici un joli script qui fait cela pour vous ; il masque l'élément de case à cocher réel, le remplace par une étendue de style et redirige les événements de clic.

Il existe un moyen de le faire en utilisant uniquement CSS. Nous pouvons (ab) utiliser l' labelélément et le styliser à la place. La mise en garde est que cela ne fonctionnera pas pour Internet Explorer 8 et les versions inférieures.

.myCheckbox input {
  position: relative;
  z-index: -9999;
}

.myCheckbox span {
  width: 20px;
  height: 20px;
  display: block;
  background: url("link_to_image");
}

.myCheckbox input:checked + span {
  background: url("link_to_another_image");
}

<label for="test">Label for my styled "checkbox"</label>
<label class="myCheckbox">
  <input type="checkbox" name="test" />
  <span></span>
</label>

Vous pouvez obtenir un effet de case à cocher personnalisé assez cool en utilisant les nouvelles capacités fournies avec les :afteret :beforepseudo-classes. L'avantage à cela est: vous n'avez pas besoin d'ajouter quelque chose de plus au DOM, juste la case à cocher standard.

Notez que cela ne fonctionnera que pour les navigateurs compatibles. Je crois que cela est lié au fait que certains navigateurs ne vous permettent pas de définir :afteret :beforesur les éléments d'entrée. Ce qui signifie malheureusement pour le moment que seuls les navigateurs WebKit sont supportés. Firefox + Internet Explorer permettra toujours aux cases à cocher de fonctionner, sans style, et cela changera, espérons-le, à l'avenir (le code n'utilise pas les préfixes des fournisseurs).

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

Voir l'exemple de violon

$(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%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table style="width:100%">
  <tr>
    <td>Normal:</td>
    <td><input type="checkbox" /></td>
    <td><input type="checkbox" checked="checked" /></td>
    <td><input type="checkbox" disabled="disabled" /></td>
    <td><input type="checkbox" disabled="disabled" checked="checked" /></td>
  </tr>
  <tr>
    <td>Small:</td>
    <td><input type="checkbox" class="myinput" /></td>
    <td><input type="checkbox" checked="checked" class="myinput" /></td>
    <td><input type="checkbox" disabled="disabled" class="myinput" /></td>
    <td><input type="checkbox" disabled="disabled" checked="checked" class="myinput" /></td>
  </tr>
  <tr>
    <td>Large:</td>
    <td><input type="checkbox" class="myinput large" /></td>
    <td><input type="checkbox" checked="checked" class="myinput large" /></td>
    <td><input type="checkbox" disabled="disabled" class="myinput large" /></td>
    <td><input type="checkbox" disabled="disabled" checked="checked" class="myinput large" /></td>
  </tr>
  <tr>
    <td>Custom icon:</td>
    <td><input type="checkbox" class="myinput large custom" /></td>
    <td><input type="checkbox" checked="checked" class="myinput large custom" /></td>
    <td><input type="checkbox" disabled="disabled" class="myinput large custom" /></td>
    <td><input type="checkbox" disabled="disabled" checked="checked" class="myinput large custom" /></td>
  </tr>
</table>

Violon à bascule de style bonus Webkit

$(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";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<h2>Webkit friendly mobile-style checkbox/flipswitch</h2>
<input type="checkbox" class="flipswitch" /> &nbsp;
<span></span>
<br>
<input type="checkbox" checked="checked" class="flipswitch" /> &nbsp;
<span></span>

Avant de commencer (en janvier 2015)

La question et la réponse d'origine ont maintenant environ 5 ans. En tant que tel, il s'agit d'une petite mise à jour.

Premièrement, il existe un certain nombre d'approches en ce qui concerne le style des cases à cocher. le principe de base est:

1. Vous devrez masquer le contrôle de case à cocher par défaut qui est stylisé par votre navigateur et ne peut pas être remplacé de manière significative à l'aide de CSS.

2. Avec le contrôle caché, vous devrez toujours être en mesure de détecter et de basculer son état vérifié

3. L'état vérifié de la case à cocher devra être reflété en stylisant un nouvel élément

La solution (en principe)

Ce qui précède peut être accompli par un certain nombre de moyens - et vous entendrez souvent que l'utilisation de pseudo-éléments CSS3 est la bonne façon. En fait, il n'y a pas vraiment de bonne ou de mauvaise façon, cela dépend de l'approche la plus appropriée au contexte dans lequel vous allez l'utiliser. Cela dit, j'en ai une préférée.

1. Enveloppez votre case à cocher dans un labelélément. Cela signifie que même lorsqu'il est masqué, vous pouvez toujours basculer son état coché en cliquant n'importe où dans l'étiquette.

2. Cachez votre case à cocher

3. Ajoutez un nouvel élément après la case à cocher que vous stylerez en conséquence. Il doit apparaître après la case à cocher afin qu'il puisse être sélectionné à l'aide de CSS et stylisé en fonction de l' :checkedétat. CSS ne peut pas sélectionner «en arrière».

La solution (en code)

label input {
  visibility: hidden;/* <-- Hide the default checkbox. The rest is to hide and allow tabbing, which display:none prevents */
  display: block;
  height: 0;
  width: 0;
  position: absolute;
  overflow: hidden;
}
label span {/* <-- Style the artificial checkbox */
  height: 10px;
  width: 10px;
  border: 1px solid grey;
  display: inline-block;
}
[type=checkbox]:checked + span {/* <-- Style its checked state */
  background: black;
}

<label>
  <input type='checkbox'>
  <span></span>
  Checkbox label text
</label>

Raffinement (à l'aide d'icônes)

Mais salut! Je t'entends crier. Et si je veux montrer une jolie petite coche ou une croix dans la boîte? Et je ne veux pas utiliser d'images d'arrière-plan!

Eh bien, c'est là que les pseudo-éléments de CSS3 peuvent entrer en jeu. Ceux-ci prennent en charge la contentpropriété qui vous permet d'injecter des icônes Unicode représentant l'un ou l'autre état. Alternativement, vous pouvez utiliser une source d'icône de police tierce telle que police géniale (bien que assurez-vous de définir également la valeur appropriée font-family, par exemple pour FontAwesome)

label input {
  display: none; /* Hide the default checkbox */
}

/* Style the artificial checkbox */
label span {
  height: 10px;
  width: 10px;
  border: 1px solid grey;
  display: inline-block;
  position: relative;
}

/* Style its checked state...with a ticked icon */
[type=checkbox]:checked + span:before {
  content: '\2714';
  position: absolute;
  top: -5px;
  left: 0;
}

<label>
  <input type='checkbox'>
  <span></span>
  Checkbox label text
</label>

Je suivrais les conseils de la réponse de SW4 - pour masquer la case à cocher et la couvrir avec une étendue personnalisée, suggérant ce HTML:

<label>
  <input type="checkbox">
  <span>send newsletter</span>
</label>

L'enveloppe enveloppante permet de cliquer sur le texte sans avoir besoin de la liaison d'attribut "for-id". cependant,

Ne le cachez pas en utilisant visibility: hiddenoudisplay: none

Cela fonctionne en cliquant ou en tapant, mais c'est une façon boiteuse d'utiliser les cases à cocher. Certaines personnes utilisent encore beaucoup plus efficacement Tabpour déplacer le focus, Spacepour l'activer, et se cacher avec cette méthode la désactive. Si le formulaire est long, on gardera les poignets de quelqu'un à utiliser tabindexou à accesskeyattribuer. Et si vous observez le comportement de la case à cocher du système, il y a une ombre décente au survol. La case à cocher bien conçue doit suivre ce comportement.

La réponse de cobberboy recommande Font Awesome qui est généralement meilleur que le bitmap car les polices sont des vecteurs évolutifs. En travaillant avec le code HTML ci-dessus, je suggère ces règles CSS:

1. Masquer les cases à cocher

   input[type="checkbox"] {
     position: absolute;
     opacity: 0;
     z-index: -1;
   }

   J'utilise juste négatif z-indexcar mon exemple utilise un habillage de case à cocher suffisamment grand pour le couvrir complètement. Je ne le recommande pas left: -999pxcar il n'est pas réutilisable dans toutes les mises en page. La réponse de Bushan wagh fournit un moyen à toute épreuve de le cacher et de convaincre le navigateur d'utiliser tabindex, c'est donc une bonne alternative. Quoi qu'il en soit, les deux ne sont qu'un hack. La bonne façon aujourd'hui est de appearance: nonevoir la réponse de Joost :

   input[type="checkbox"] {
     appearance: none;
     -webkit-appearance: none;
     -moz-appearance: none;
   }

2. Étiquette de case à cocher Style

   input[type="checkbox"] + span {
     font: 16pt sans-serif;
     color: #000;
   }

3. Ajouter un habillage de case à cocher

   input[type="checkbox"] + span:before {
     font: 16pt FontAwesome;
     content: '\00f096';
     display: inline-block;
     width: 16pt;
     padding: 2px 0 0 3px;
     margin-right: 0.5em;
   }

   \00f096est Font Awesome square-o, le rembourrage est ajusté pour fournir un contour en pointillé uniforme sur le focus (voir ci-dessous).

4. Ajouter une case cochée

   input[type="checkbox"]:checked + span:before {
     content: '\00f046';
   }

   \00f046est Font Awesome check-square-o, qui n'est pas la même largeur que square-o, ce qui est la raison du style de largeur ci-dessus.

5. Ajouter un contour de mise au point

   input[type="checkbox"]:focus + span:before {
     outline: 1px dotted #aaa;
   }

   Safari ne fournit pas cette fonctionnalité (voir le commentaire de @Jason Sankey), vous devez utiliser window.navigatorpour détecter le navigateur et l'ignorer s'il s'agit de Safari.

6. Case à cocher Définir la couleur grise pour désactivé

   input[type="checkbox"]:disabled + span {
     color: #999;
   }

7. Définir l'ombre du survol sur la case à cocher non désactivée

   input[type="checkbox"]:not(:disabled) + span:hover:before {
     text-shadow: 0 1px 2px #77F;
   }

Demo Fiddle

Essayez de passer la souris sur les cases à cocher et utilisez Tabet Shift+ Tabpour vous déplacer et Spacebasculer.

Vous pouvez styliser les cases à cocher avec une petite ruse en utilisant l' labelélément un exemple ci-dessous:

.checkbox > input[type=checkbox] {
  visibility: hidden;
}

.checkbox {
  position: relative;
  display: block;
  width: 80px;
  height: 26px;
  margin: 0 auto;
  background: #FFF;
  border: 1px solid #2E2E2E;
  border-radius: 2px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
}

.checkbox:after {
  position: absolute;
  display: inline;
  right: 10px;
  content: 'no';
  color: #E53935;
  font: 12px/26px Arial, sans-serif;
  font-weight: bold;
  text-transform: capitalize;
  z-index: 0;
}

.checkbox:before {
  position: absolute;
  display: inline;
  left: 10px;
  content: 'yes';
  color: #43A047;
  font: 12px/26px Arial, sans-serif;
  font-weight: bold;
  text-transform: capitalize;
  z-index: 0;
}

.checkbox label {
  position: absolute;
  display: block;
  top: 3px;
  left: 3px;
  width: 34px;
  height: 20px;
  background: #2E2E2E;
  cursor: pointer;
  transition: all 0.5s linear;
  -webkit-transition: all 0.5s linear;
  -moz-transition: all 0.5s linear;
  border-radius: 2px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  z-index: 1;
}

.checkbox input[type=checkbox]:checked + label {
  left: 43px;
}

<div class="checkbox">
  <input id="checkbox1" type="checkbox" value="1" />
  <label for="checkbox1"></label>
</div>

Et un FIDDLE pour le code ci-dessus. Notez que certains CSS ne fonctionnent pas dans les anciennes versions des navigateurs, mais je suis sûr qu'il existe de fantastiques exemples JavaScript!

Solution simple à mettre en œuvre et facilement personnalisable

Après beaucoup de recherches et de tests, j'ai obtenu cette solution qui est simple à mettre en œuvre et plus facile à personnaliser. Dans cette solution :

1. Vous n'avez pas besoin de bibliothèques et de fichiers externes
2. Vous n'avez pas besoin d'ajouter du HTML supplémentaire dans votre page
3. Vous n'avez pas besoin de changer les noms et l'identifiant des cases à cocher

Mettez simplement le CSS fluide en haut de votre page et le style de toutes les cases à cocher changera comme ceci:

input[type=checkbox] {
  transform: scale(1.5);
}

input[type=checkbox] {
  width: 30px;
  height: 30px;
  margin-right: 8px;
  cursor: pointer;
  font-size: 17px;
  visibility: hidden;
}

input[type=checkbox]:after {
  content: " ";
  background-color: #fff;
  display: inline-block;
  margin-left: 10px;
  padding-bottom: 5px;
  color: #00BFF0;
  width: 22px;
  height: 25px;
  visibility: visible;
  border: 1px solid #00BFF0;
  padding-left: 3px;
  border-radius: 5px;
}

input[type=checkbox]:checked:after {
  content: "\2714";
  padding: -5px;
  font-weight: bold;
}

Vous pouvez éviter d'ajouter du balisage supplémentaire. Cela fonctionne partout sauf IE pour Desktop (mais fonctionne dans IE pour Windows Phone et Microsoft Edge) via la définition de CSS appearance:

input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  /* Styling checkbox */
  width: 16px;
  height: 16px;
  background-color: red;
}

input[type="checkbox"]:checked {
  background-color: green;
}

<input type="checkbox" />

Je préfère utiliser des polices d'icônes (telles que FontAwesome) car il est facile de modifier leurs couleurs avec CSS, et elles évoluent très bien sur les appareils à haute densité de pixels. Voici donc une autre variante CSS pure, utilisant des techniques similaires à celles ci-dessus.

(Ci-dessous est une image statique pour que vous puissiez visualiser le résultat; voir le JSFiddle pour une version interactive.)

Comme pour les autres solutions, il utilise l' labelélément. Un adjacent spancontient notre caractère de case à cocher.

span.bigcheck-target {
  font-family: FontAwesome; /* Use an icon font for the checkbox */
}

input[type='checkbox'].bigcheck {
  position: relative;
  left: -999em; /* Hide the real checkbox */
}

input[type='checkbox'].bigcheck + span.bigcheck-target:after {
  content: "\f096"; /* In fontawesome, is an open square (fa-square-o) */
}

input[type='checkbox'].bigcheck:checked + span.bigcheck-target:after {
  content: "\f046"; /* fontawesome checked box (fa-check-square-o) */
}

/* ==== Optional - colors and padding to make it look nice === */
body {
  background-color: #2C3E50;
  color: #D35400;
  font-family: sans-serif;
  font-weight: 500;
  font-size: 4em; /* Set this to whatever size you want */
}

span.bigcheck {
  display: block;
  padding: 0.5em;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

<span class="bigcheck">
  <label class="bigcheck">
    Cheese
    <input type="checkbox" class="bigcheck" name="cheese" value="yes" />
    <span class="bigcheck-target"></span>
  </label>
</span>

Voici le JSFiddle pour cela.

Récemment, j'ai trouvé une solution assez intéressante au problème.

Vous pouvez utiliser appearance: none;pour désactiver le style par défaut de la case à cocher, puis écrire le vôtre par dessus, comme décrit ici (exemple 4) .

Exemple de violon

input[type=checkbox] {
  width: 23px;
  height: 23px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin-right: 10px;
  background-color: #878787;
  outline: 0;
  border: 0;
  display: inline-block;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
}

input[type=checkbox]:focus {
  outline: none;
  border: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
}

input[type=checkbox]:checked {
  background-color: green;
  text-align: center;
  line-height: 15px;
}

<input type="checkbox">

Malheureusement, la prise en charge du navigateur est assez mauvaise pour l' appearanceoption. D'après mes tests personnels, Opera et Chrome ne fonctionnaient que correctement. Mais ce serait la voie à suivre pour rester simple lorsqu'un meilleur support est disponible ou que vous souhaitez uniquement utiliser Chrome / Opera.

"Puis-je utiliser?" lien

Avec du CSS pur, rien de spécial avec :beforeet :aftersans transformation, vous pouvez désactiver l'apparence par défaut, puis la styliser avec une image d'arrière-plan en ligne comme dans l'exemple suivant. Cela fonctionne dans Chrome, Firefox, Safari et maintenant Edge (Chromium Edge).

INPUT[type=checkbox]:focus
{
    outline: 1px solid rgba(0, 0, 0, 0.2);
}

INPUT[type=checkbox]
{
    background-color: #DDD;
    border-radius: 2px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 17px;
    height: 17px;
    cursor: pointer;
    position: relative;
    top: 5px;
}

INPUT[type=checkbox]:checked
{
    background-color: #409fd6;
    background: #409fd6 url("data:image/gif;base64,R0lGODlhCwAKAIABAP////3cnSH5BAEKAAEALAAAAAALAAoAAAIUjH+AC73WHIsw0UCjglraO20PNhYAOw==") 3px 3px no-repeat;
}

<form>
  <label><input type="checkbox">I Agree To Terms &amp; Conditions</label>
</form>

Ma solution

input[type="checkbox"] {
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: 0;
  background: lightgray;
  height: 16px;
  width: 16px;
  border: 1px solid white;
}

input[type="checkbox"]:checked {
  background: #2aa1c0;
}

input[type="checkbox"]:hover {
  filter: brightness(90%);
}

input[type="checkbox"]:disabled {
  background: #e6e6e6;
  opacity: 0.6;
  pointer-events: none;
}

input[type="checkbox"]:after {
  content: '';
  position: relative;
  left: 40%;
  top: 20%;
  width: 15%;
  height: 40%;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  display: none;
}

input[type="checkbox"]:checked:after {
  display: block;
}

input[type="checkbox"]:disabled:after {
  border-color: #7b7b7b;
}

<input type="checkbox"><br>
<input type="checkbox" checked><br>
<input type="checkbox" disabled><br>
<input type="checkbox" disabled checked><br>

Vous pouvez simplement utiliser appearance: nonesur les navigateurs modernes, afin qu'il n'y ait pas de style par défaut et que tous vos styles soient appliqués correctement:

input[type=checkbox] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: inline-block;
  width: 2em;
  height: 2em;
  border: 1px solid gray;
  outline: none;
  vertical-align: middle;
}

input[type=checkbox]:checked {
  background-color: blue;
}

Vous ne voulez PAS de JavaScript, PAS de bibliothèques externes, la conformité de l'accessibilité et des cases à cocher et des boutons radio?

J'ai fait défiler et faire défiler et des tonnes de ces réponses jettent simplement l'accessibilité par la porte et violent les WCAG à plus d'un titre. J'ai ajouté des boutons radio car la plupart du temps, lorsque vous utilisez des cases à cocher personnalisées, vous souhaitez également des boutons radio personnalisés.

Violons :

• Cases à cocher - CSS pur - exempt de bibliothèques tierces
• Boutons radio - CSS pur - sans bibliothèques tierces
• Cases à cocher * qui utilisent FontAwesome mais qui peuvent être échangées facilement avec des glyphiques, etc.

Tard dans la soirée, mais en quelque sorte, cela reste difficile en 2019 2020, j'ai donc ajouté mes trois solutions qui sont accessibles et faciles à déposer.

Ce sont tous libres JavaScript , sans bibliothèque externe * et accessible ...

Si vous souhaitez brancher et jouer avec l'un de ces éléments, copiez simplement la feuille de style à partir des violons, modifiez les codes de couleur dans le CSS pour répondre à vos besoins et soyez sur votre chemin. Vous pouvez ajouter une icône de coche svg personnalisée si vous le souhaitez pour les cases à cocher. J'ai ajouté beaucoup de commentaires pour ces gens non CSS'y.

Si vous avez du texte long ou un petit conteneur et que vous rencontrez un habillage de texte sous la case à cocher ou l'entrée du bouton radio, convertissez-le simplement en divs comme celui-ci .

Explication plus longue: j'avais besoin d'une solution qui ne viole pas WCAG, ne s'appuie pas sur JavaScript ou des bibliothèques externes, et qui ne rompt pas la navigation au clavier comme la tabulation ou la barre d'espace pour sélectionner, qui permet les événements de focus, une solution qui permet les cases à cocher désactivées qui sont tous deux enregistrés et non enregistrés, et enfin une solution où je peux personnaliser l'apparence de la case à cocher mais je veux avec différents background-colorde, border-radius, svgarrière - plans, etc.

J'ai utilisé une combinaison de cette réponse de @Jan Turoň pour trouver ma propre solution qui semble fonctionner assez bien. J'ai fait un violon de bouton radio qui utilise beaucoup du même code des cases à cocher afin que cela fonctionne aussi avec les boutons radio.

J'apprends toujours l'accessibilité, donc si j'ai raté quelque chose, laissez un commentaire et j'essaierai de le corriger voici un exemple de code de mes cases à cocher:

input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  z-index: -1;
}

/* Text color for the label */
input[type="checkbox"]+span {
  cursor: pointer;
  font: 16px sans-serif;
  color: black;
}

/* Checkbox un-checked style */
input[type="checkbox"]+span:before {
  content: '';
  border: 1px solid grey;
  border-radius: 3px;
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 0.5em;
  margin-top: 0.5em;
  vertical-align: -2px;
}

/* Checked checkbox style (in this case the background is red) */
input[type="checkbox"]:checked+span:before {
  /* NOTE: Replace the url with a path to an SVG of a checkmark to get a checkmark icon */
  background-image: url('https://cdnjs.cloudflare.com/ajax/libs/ionicons/4.5.6/collection/build/ionicons/svg/ios-checkmark.svg');
  background-repeat: no-repeat;
  background-position: center;
  /* The size of the checkmark icon, you may/may not need this */
  background-size: 25px;
  border-radius: 2px;
  background-color: #e7ffba;
  color: white;
}

/* Adding a dotted border around the active tabbed-into checkbox */
input[type="checkbox"]:focus+span:before,
input[type="checkbox"]:not(:disabled)+span:hover:before {
  /* Visible in the full-color space */
  box-shadow: 0px 0px 0px 2px rgba(0, 150, 255, 1);

  /* Visible in Windows high-contrast themes
     box-shadow will be hidden in these modes and
     transparency will not be hidden in high-contrast
     thus box-shadow will not show but the outline will
     providing accessibility */
  outline-color: transparent; /*switch to transparent*/
  outline-width: 2px;
  outline-style: dotted;
  }


/* Disabled checkbox styles */
input[type="checkbox"]:disabled+span {
  cursor: default;
  color: black;
  opacity: 0.5;
}

/* Styles specific to this fiddle that you do not need */
body {
  padding: 1em;
}
h1 {
  font-size: 18px;
}

<h1>
  NOTE: Replace the url for the background-image in CSS with a path to an SVG in your solution or CDN. This one was found from a quick google search for a checkmark icon cdn
</h1>

<label>
  <input type="checkbox">
  <span>Try using tab and space</span>
</label>

<br>

<label>
  <input type="checkbox" checked disabled>
  <span>Disabled Checked Checkbox</span>
</label>

<br>

<label>
  <input type="checkbox" disabled>
  <span>Disabled Checkbox</span>
</label>
<br>

<label>
  <input type="checkbox">
  <span>Normal Checkbox</span>
</label>

<br>

<label>
  <input type="checkbox">
  <span>Another Normal Checkbox</span>
</label>

Voici une solution CSS simple sans code jQuery ou JavaScript.

J'utilise des icônes FontAwseome mais vous pouvez utiliser n'importe quelle image

input[type=checkbox] {
  display: inline-block;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  visibility: hidden;
  font-size: 14px;
}

input[type=checkbox]:before {
  content: @fa-var-square-o;
  visibility: visible;
  /*font-size: 12px;*/
}

input[type=checkbox]:checked:before {
  content: @fa-var-check-square-o;
}

De mon googler, c'est le moyen le plus simple pour le style de case à cocher. Ajoutez simplement :afteret :checked:afterCSS en fonction de votre conception.

body{
  background: #DDD;
}
span{
  margin-left: 30px;
}
input[type=checkbox] {
    cursor: pointer;
    font-size: 17px;
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    transform: scale(1.5);
}

input[type=checkbox]:after {
    content: " ";
    background-color: #fff;
    display: inline-block;
    color: #00BFF0;
    width: 14px;
    height: 19px;
    visibility: visible;
    border: 1px solid #FFF;
    padding: 0 3px;
    margin: 2px 0;
    border-radius: 8px;
    box-shadow: 0 0 15px 0 rgba(0,0,0,0.08), 0 0 2px 0 rgba(0,0,0,0.16);
}

input[type=checkbox]:checked:after {
    content: "\2714";
    display: unset;
    font-weight: bold;
}

<input type="checkbox"> <span>Select Text</span>

Modifiez le style de case à cocher avec CSS3 ordinaire, ne nécessite aucune manipulation JS et HTML.

.form input[type="checkbox"]:before {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  content: "\f096";
  opacity: 1 !important;
  margin-top: -25px;
  appearance: none;
  background: #fff;
}

.form input[type="checkbox"]:checked:before {
  content: "\f046";
}

.form input[type="checkbox"] {
  font-size: 22px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<form class="form">
  <input type="checkbox" />
</form>

Un modèle simple et léger également:

input[type=checkbox] {
  cursor: pointer;
}

input[type=checkbox]:checked:before {
  content: "\2713";
  background: #fffed5;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
  font-size: 20px;
  text-align: center;
  line-height: 8px;
  display: inline-block;
  width: 13px;
  height: 15px;
  color: #00904f;
  border: 1px solid #cdcdcd;
  border-radius: 4px;
  margin: -3px -3px;
  text-indent: 1px;
}

input[type=checkbox]:before {
  content: "\202A";
  background: #ffffff;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
  font-size: 20px;
  text-align: center;
  line-height: 8px;
  display: inline-block;
  width: 13px;
  height: 15px;
  color: #00904f;
  border: 1px solid #cdcdcd;
  border-radius: 4px;
  margin: -3px -3px;
  text-indent: 1px;
}

<input type="checkbox" checked="checked">checked1<br>
<input type="checkbox">unchecked2<br>
<input type="checkbox" checked="checked" id="id1">
<label for="id1">checked2+label</label><br>
<label for="id2">unchecked2+label+rtl</label>
<input type="checkbox" id="id2">
<br>

https://jsfiddle.net/rvgccn5b/

Je pense que la façon la plus simple de le faire est de styliser a labelet de rendre l' checkboxinvisible.

HTML

<input type="checkbox" id="first" />
<label for="first">&nbsp;</label>

CSS

checkbox {
  display: none;
}

checkbox + label {
  /* Style for checkbox normal */
  width: 16px;
  height: 16px;
}

checkbox::checked + label,
label.checked {
  /* Style for checkbox checked */
}

Le checkbox, même s'il est masqué, sera toujours accessible et sa valeur sera envoyée lors de la soumission d'un formulaire. Pour les anciens navigateurs, vous devrez peut-être modifier la classe de la labelà cochée à l'aide de JavaScript, car je ne pense pas que les anciennes versions d'Internet Explorer comprennent ::checkedle checkbox.

Oui! Toutes ces solutions de contournement m'ont amené à la conclusion que le type de case à cocher HTML est nul si vous voulez le styliser.

À titre d'avertissement, ce n'est pas une implémentation CSS. Je pensais juste partager la solution de contournement que j'ai trouvée au cas où quelqu'un d'autre pourrait la trouver utile.

J'ai utilisé l' canvasélément HTML5 .

L'avantage est que vous n'avez pas à utiliser d'images externes et que vous pouvez probablement économiser de la bande passante.

L'inconvénient est que si un navigateur ne peut pas le rendre correctement, il n'y a pas de solution de rechange. Bien que cela reste un problème en 2017 est discutable.

Mise à jour

J'ai trouvé l'ancien code assez moche, alors j'ai décidé de le réécrire.

Object.prototype.create = function(args){
    var retobj = Object.create(this);

    retobj.constructor(args || null);

    return retobj;
}

var Checkbox = Object.seal({
    width: 0,
    height: 0,
    state: 0,
    document: null,
    parent: null,
    canvas: null,
    ctx: null,

    /*
     * args:
     * name      default             desc.
     *
     * width     15                  width
     * height    15                  height
     * document  window.document     explicit document reference
     * target    this.document.body  target element to insert checkbox into
     */
    constructor: function(args){
        if(args === null)
            args = {};

        this.width = args.width || 15;
        this.height = args.height || 15;
        this.document = args.document || window.document;
        this.parent = args.target || this.document.body;
        this.canvas = this.document.createElement("canvas");
        this.ctx = this.canvas.getContext('2d');

        this.canvas.width = this.width;
        this.canvas.height = this.height;
        this.canvas.addEventListener("click", this.ev_click(this), false);
        this.parent.appendChild(this.canvas);
        this.draw();
    },

    ev_click: function(self){
        return function(unused){
            self.state = !self.state;
            self.draw();
        }
    },

    draw_rect: function(color, offset){
        this.ctx.fillStyle = color;
        this.ctx.fillRect(offset, offset,
                this.width - offset * 2, this.height - offset * 2);
    },

    draw: function(){
        this.draw_rect("#CCCCCC", 0);
        this.draw_rect("#FFFFFF", 1);

        if(this.is_checked())
            this.draw_rect("#000000", 2);
    },

    is_checked: function(){
        return !!this.state;
    }
});

Voici une démo qui fonctionne .

La nouvelle version utilise des prototypes et l'héritage différentiel pour créer un système efficace de création de cases à cocher. Pour créer une case à cocher:

var my_checkbox = Checkbox.create();

Cela ajoutera immédiatement la case à cocher au DOM et connectera les événements. Pour savoir si une case est cochée:

my_checkbox.is_checked(); // True if checked, else false

Il est également important de noter que je me suis débarrassé de la boucle.

Update 2

Quelque chose que j'ai négligé de mentionner dans la dernière mise à jour est que l'utilisation du canevas a plus d'avantages que de simplement créer une case à cocher qui ressemble à ce que vous voulez. Vous pouvez également créer des cases à cocher à plusieurs états , si vous le souhaitez.

Object.prototype.create = function(args){
    var retobj = Object.create(this);

    retobj.constructor(args || null);

    return retobj;
}

Object.prototype.extend = function(newobj){
    var oldobj = Object.create(this);

    for(prop in newobj)
        oldobj[prop] = newobj[prop];

    return Object.seal(oldobj);
}

var Checkbox = Object.seal({
    width: 0,
    height: 0,
    state: 0,
    document: null,
    parent: null,
    canvas: null,
    ctx: null,

    /*
     * args:
     * name      default             desc.
     *
     * width     15                  width
     * height    15                  height
     * document  window.document     explicit document reference
     * target    this.document.body  target element to insert checkbox into
     */
    constructor: function(args){
        if(args === null)
            args = {};

        this.width = args.width || 15;
        this.height = args.height || 15;
        this.document = args.document || window.document;
        this.parent = args.target || this.document.body;
        this.canvas = this.document.createElement("canvas");
        this.ctx = this.canvas.getContext('2d');

        this.canvas.width = this.width;
        this.canvas.height = this.height;
        this.canvas.addEventListener("click", this.ev_click(this), false);
        this.parent.appendChild(this.canvas);
        this.draw();
    },

    ev_click: function(self){
        return function(unused){
            self.state = !self.state;
            self.draw();
        }
    },

    draw_rect: function(color, offsetx, offsety){
        this.ctx.fillStyle = color;
        this.ctx.fillRect(offsetx, offsety,
                this.width - offsetx * 2, this.height - offsety * 2);
    },

    draw: function(){
        this.draw_rect("#CCCCCC", 0, 0);
        this.draw_rect("#FFFFFF", 1, 1);
        this.draw_state();
    },

    draw_state: function(){
        if(this.is_checked())
            this.draw_rect("#000000", 2, 2);
    },

    is_checked: function(){
        return this.state == 1;
    }
});

var Checkbox3 = Checkbox.extend({
    ev_click: function(self){
        return function(unused){
            self.state = (self.state + 1) % 3;
            self.draw();
        }
    },

    draw_state: function(){
        if(this.is_checked())
            this.draw_rect("#000000", 2, 2);

        if(this.is_partial())
            this.draw_rect("#000000", 2, (this.height - 2) / 2);
    },

    is_partial: function(){
        return this.state == 2;
    }
});

J'ai légèrement modifié l' Checkboxutilisé dans le dernier extrait pour qu'il soit plus générique, permettant de "l'étendre" avec une case à cocher qui a 3 états. Voici une démo . Comme vous pouvez le voir, il a déjà plus de fonctionnalités que la case à cocher intégrée.

Quelque chose à considérer lorsque vous choisissez entre JavaScript et CSS.

Code ancien et mal conçu

Démo de travail

Tout d'abord, créez une toile

var canvas = document.createElement('canvas'),
    ctx = canvas.getContext('2d'),
    checked = 0; // The state of the checkbox
canvas.width = canvas.height = 15; // Set the width and height of the canvas
document.body.appendChild(canvas);
document.body.appendChild(document.createTextNode(' Togglable Option'));

Ensuite, imaginez un moyen de mettre à jour le canevas lui-même.

(function loop(){
  // Draws a border
  ctx.fillStyle = '#ccc';
  ctx.fillRect(0,0,15,15);
  ctx.fillStyle = '#fff';
  ctx.fillRect(1, 1, 13, 13);
  // Fills in canvas if checked
  if(checked){
    ctx.fillStyle = '#000';
    ctx.fillRect(2, 2, 11, 11);
  }
  setTimeout(loop, 1000/10); // Refresh 10 times per second
})();

La dernière partie est de le rendre interactif. Heureusement, c'est assez simple:

canvas.onclick = function(){
  checked = !checked;
}

C'est là que vous pourriez avoir des problèmes dans IE, en raison de leur modèle de gestion d'événements étrange en JavaScript.

J'espère que ça aidera quelqu'un; il convenait définitivement à mes besoins.

C'est la manière la plus simple et vous pouvez choisir les cases à cocher pour donner ce style.

CSS:

.check-box input {
  display: none;
}

.check-box span:before {
  content: ' ';
  width: 20px;
  height: 20px;
  display: inline-block;
  background: url("unchecked.png");
}

.check-box input:checked + span:before {
  background: url("checked.png");
}

HTML:

<label class="check-box">
  <input type="checkbox">
  <span>Check box Text</span>
</label>

Aucun JavaScript ou jQuery requis .

Modifiez votre style de case à cocher de manière simple.

input[type="checkbox"] {
  display: none;
  border: none !important;
  box-shadow: none !important;
}

input[type="checkbox"] + label span {
  background: url(http://imgh.us/uncheck.png);
  width: 49px;
  height: 49px;
  display: inline-block;
  vertical-align: middle;
}

input[type="checkbox"]:checked + label span {
  background: url(http://imgh.us/check_2.png);
  width: 49px;
  height: 49px;
  vertical-align: middle;
}

<input type="checkbox" id="option" />
<label for="option"> <span></span> Click me </label>

Voici le lien JsFiddle

Voici une version CSS / HTML uniquement, pas de jQuery ou JavaScript nécessaire du tout, HTML simple et propre et CSS vraiment simple et court.

Voici le JSFiddle

http://jsfiddle.net/v71kn3pr/

Voici le HTML:

<div id="myContainer">
    <input type="checkbox" name="myCheckbox" id="myCheckbox_01_item" value="red" />
    <label for="myCheckbox_01_item" class="box"></label>
    <label for="myCheckbox_01_item" class="text">I accept the Terms of Use.</label>
</div>

Voici le CSS

#myContainer {
    outline: black dashed 1px;
    width: 200px;
}
#myContainer input[type="checkbox"][name="myCheckbox"] {
    display: none;
}
#myContainer input[type="checkbox"][name="myCheckbox"]:not(:checked) + label.box {
    display: inline-block;
    width: 25px;
    height: 25px;
    border: black solid 1px;
    background: #FFF ;
    margin: 5px 5px;
}
#myContainer input[type="checkbox"][name="myCheckbox"]:checked + label.box {
    display: inline-block;
    width: 25px;
    height: 25px;
    border: black solid 1px;
    background: #F00;
    margin: 5px 5px;
}
#myContainer input[type="checkbox"][name="myCheckbox"] + label + label.text {
    font: normal 12px arial;
    display: inline-block;
    line-height: 27px;
    vertical-align: top;
    margin: 5px 0px;
}

Cela peut être adapté pour pouvoir avoir une radio ou des cases à cocher individuelles, des groupes de cases à cocher et des groupes de boutons radio.

Ce html / css, vous permettra également de capturer un clic sur l'étiquette, de sorte que la case à cocher sera cochée et décochée même si vous cliquez uniquement sur l'étiquette.

Ce type de case à cocher / bouton radio fonctionne parfaitement avec n'importe quelle forme, pas de problème du tout. Ont également été testés en utilisant PHP, ASP.NET (.aspx), JavaServer Faces et ColdFusion .

**Custom checkbox with css**  (WebKit browser solution only Chrome, Safari, Mobile browsers)

    <input type="checkbox" id="cardAccptance" name="cardAccptance" value="Yes">
    <label for="cardAccptance" class="bold"> Save Card for Future Use</label>

    /* The checkbox-cu */

    .checkbox-cu {
        display: block;
        position: relative;
        padding-left: 35px;
        margin-bottom: 0;
        cursor: pointer;
        font-size: 16px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }


    /* Hide the browser's default checkbox-cu */

    .checkbox-cu input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }


    /* Create a custom checkbox-cu */

    .checkmark {
        position: absolute;
        top: 4px;
        left: 0;
        height: 20px;
        width: 20px;
        background-color: #eee;
        border: 1px solid #999;
        border-radius: 0;
        box-shadow: none;
    }


    /* On mouse-over, add a grey background color */

    .checkbox-cu:hover input~.checkmark {
        background-color: #ccc;
    }


    /* When the checkbox-cu is checked, add a blue background */

    .checkbox-cu input:checked~.checkmark {
        background-color: transparent;
    }


    /* Create the checkmark/indicator (hidden when not checked) */

    .checkmark:after {
        content: "";
        position: absolute;
        display: none;
    }


    /* Show the checkmark when checked */

    .checkbox-cu input:checked~.checkmark:after {
        display: block;
    }


    /* Style the checkmark/indicator */

    .checkbox-cu .checkmark::after {
        left: 7px;
        top: 3px;
        width: 6px;
        height: 9px;
        border: solid #28a745;
        border-width: 0 2px 2px 0;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
        z-index: 100;
    }

input[type=checkbox].css-checkbox {
    position: absolute;
    overflow: hidden;
    clip: rect(0 0 0 0);
    height: 1px;
    width: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
}

input[type=checkbox].css-checkbox + label.css-label {
    padding-left: 20px;
    height: 15px;
    display: inline-block;
    line-height: 15px;
    background-repeat: no-repeat;
    background-position: 0 0;
    font-size: 15px;
    vertical-align: middle;
    cursor: pointer;
}

input[type=checkbox].css-checkbox:checked + label.css-label {
    background-position: 0 -15px;
}

.css-label{
    background-image:url(http://csscheckbox.com/checkboxes/dark-check-green.png);
}