il y a une façon de faire cela en utilisant juste CSS. Nous pouvons (ab)utiliser l'élément et le style label qui à la place. La mise en garde est que cela ne fonctionnera pas pour les versions IE8 et inférieures.

CSS:

.myCheckbox input {
    // display: none;
    // Better than display: none for accessibility reasons
    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");
}

HTML:

<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 personnalisé assez cool en utilisant les nouvelles capacités qui viennent avec les classes :after et :before pseudo. L'avantage est que vous n'avez plus besoin d'ajouter quoi que ce soit au DOM, juste la case standard.

notez que cela ne fonctionnera que pour les navigateurs compatibles, je pense que cela est lié au fait que certains navigateurs ne vous permettent pas de définir :after et :before sur les éléments d'entrée. Qui, malheureusement, signifie pour le moment que seuls les navigateurs webkit sont pris en charge. FF + IE permettra toujours aux cases à cocher de fonctionner, tout simplement non activées, et cela devrait changer à l'avenir (le code n'utilise pas de préfixes vendeur).

il s'agit d'une solution de navigateur Webkit seulement (Chrome, Safari, navigateurs mobiles)

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

bonus WebKit style flipswitch fiddle

$(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 (à partir de Jan 2015)

la question et la réponse originales ont maintenant ~5 ans. En tant que tel, c'est un peu d'une mise à jour.

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

1. CSS.

2. avec le contrôle caché, vous aurez encore besoin d'ê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é par le style d'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 en utilisant CSS3 pseudo-éléments est le bon chemin. En fait, il n'est pas de bonne ou de mauvaise façon, il dépend de l'approche la plus appropriée pour le contexte dans lequel vous l'utilisez. Cela dit, j'ai préféré avoir un seul.

1. enveloppez votre case dans un élément label . Cela signifie que même lorsqu'il est caché, vous pouvez toujours basculer son état vérifié en cliquant n'importe où dans l'étiquette.

2. cachez votre case

3. Ajouter un nouvel élément après la case à cocher que vous remplirez en conséquence. Il doit apparaître après la case à cocher pour qu'il puisse être sélectionné en utilisant CSS et intitulé dépendant de l'état :checked . CSS ne peut pas sélectionner "backwards".

La solution (dans le code)

label input {
  visibility: hidden;/* <-- hide the default checkbox, the rest is to hide and alllow 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>

(à l'aide d'icônes)

mais hé! Je vous entends crier. Et si je veux montrer une petite coche ou une croix dans la boîte? Et je ne veux pas utiliser d'images de fond!

Eh bien, c'est là que les pseudo-éléments de CSS3 peuvent entrer en jeu. Ceux-ci supportent la propriété content qui vous permet d'injecter icônes unicode représentant l'un ou l'autre État. Alternativement, vous pouvez utiliser une source d'icône de fonte tierce partie comme font awesome (bien que assurez-vous vous définissez également le font-family , par exemple à 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: '14';
  position: absolute;
  top: -5px;
  left: 0;
}

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

vous pouvez styliser des cases à cocher avec un peu de ruse en utilisant l'élément label un exemple est 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 versions plus anciennes des navigateurs, mais je suis sûr qu'il y a quelques exemples de JavaScript fantaisie là-bas!

j'ai suivi le Conseil de réponse de SW4 - pour cacher la case à cocher et de le couvrir avec la portée personnalisée, suggérant ce HTML

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

le wrap in label permet de cliquer correctement sur le texte sans avoir besoin d'un lien d'attribut" for-id". Toutefois,

ne pas le cacher en utilisant visibility: hidden ou display: none

cela fonctionne en cliquant ou en tapant, mais c'est une façon boiteuse d'utiliser des cases à cocher. Certaines personnes utilisent encore beaucoup plus efficace tab pour déplacer la mise au point, espace pour activer, et se cacher avec cette méthode le désactive. Si le formulaire est long, on sauvera les poignets de quelqu'un pour utiliser les attributs tabindex ou accesskey . Et si vous observez le comportement de la case à cocher système, Il ya une ombre décente en vol stationnaire. La case à cocher bien conçue devrait suivre ce comportement.

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

1. cases à cocher En Cuir

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

   j'utilise juste négatif z-index puisque mon exemple utilise une assez grande peau de case à cocher pour le couvrir complètement. Je ne recommande pas left: -999px , car il n'est pas réutilisable dans tous les disposition. Bushan wagh la réponse de fournit un pare-balles manière à masquer et à convaincre le navigateur à utiliser tabindex, donc c'est une bonne alternative. Bref, les deux ne sont qu'un piratage. La bonne façon aujourd'hui est appearance: none , voir réponse de Joost :

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

2. Style case label

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

3. ajouter case à cocher peau

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

   "1519180920"f096 est la police Awesome square-o , le rembourrage est ajusté pour fournir même le contour pointillé sur le foyer (voir ci-dessous).

4. "

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

   " 1519200920 "f046 est la police Awesome check-square-o , qui n'est pas la même largeur que square-o , ce qui est la raison pour le style de largeur ci-dessus.

5. améliorer le contour

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

   Safari ne fournit pas cette caractéristique (voir le commentaire de @Jason Sankey), vous devriez utiliser window.navigator pour détecter le navigateur et de sauter si c'est Safari.

6. Jeu de couleur grise pour les personnes handicapées case

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

7. placer l'ombre du vol stationnaire sur la case à cocher non désactivée

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

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

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

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

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

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

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

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

<label><input type="checkbox"><span>send newsletter</span></label><br>
<label><input type="checkbox" checked disabled><span>I doubt it</span></label><br>
<label><input type="checkbox" disabled><span>well I never</span></label><br>
<label><input type="checkbox"><span>I agree with terms of use</span></label><br>
<label><input type="checkbox"><span>check to confirm</span></label>