Comment styliser une case à cocher en utilisant CSS

831

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é?

svirk
la source
1
je pense que vous cherchez quelque chose comme ceci: asimishaq.com/myfiles/image-checkbox Voir cet article: stackoverflow.com/questions/16352864/…
asim-ishaq
1
le lien est dans le commentaire ci-dessus. de toute façon: blog.felixhagspiel.de/index.php/posts/custom-inputs
Felix Hagspiel
1
Sensationnel. En regardant toutes ces réponses, je dois juste dire, Tout cela fonctionne juste pour mettre une case à cocher stylisée sur l'écran
Michael

Réponses:

784

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:

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.

Jacob Mattison
la source
34
Cette réponse vieillit! Le lien principal mène à un site comparant les styles IE6 et IE7 ...
Jonatan Littke
7
Juste point - et le point de base n'est plus vraiment vrai, dans les navigateurs modernes. J'ai mis à jour avec des liens plus récents, mais j'ai laissé l'original comme ressource pour les navigateurs plus anciens.
Jacob Mattison
3
Easy CSS Checkbox Generator , était vraiment facile et convivial n00b. Livré avec une interface graphique pour une création personnalisée aussi! Bien apprécié. :)
CᴴᴀZ
Je suis intéressé par l'ancienne réponse car je veux que cette fonctionnalité soit compatible avec IE8 + et d'autres navigateurs (chrome, firefox et safari). Cependant, je ne trouve pas beaucoup de commentaires concernant le plugin que vous recommandez ryanfait.com/resources/custom-checkboxes-and-radio-buttons
Adrien Be
2
Ce n'est pas une réponse très utile - c'est juste une liste d'articles, dont la plupart sont très anciens maintenant.
Steve Bennett
141

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>

Blake Pettersson
la source
@GandalfStormCrow, cela fonctionnera pour tout navigateur prenant en charge la: pseudo-classe vérifiée, qu'IE8 ne prend pas en charge. Vous pouvez vérifier si cela fonctionne avec selectivizr.com - qui ajoute un support pour: coché et amis.
Blake Pettersson
En d'autres termes, IE9 et les versions ultérieures prennent en charge: vérifié.
Blake Pettersson
1
Il existe un polyfill pour IE8 et ci-dessous: github.com/rdebeasi/checked-polyfill
Tim
Ça marche, mais la première fois ça scintille. Pourquoi cela se produit-il?
technophyle
Je crois que les éléments cachés inputne prennent jamais le focus sur le clavier, ils ne sont donc pas accessibles par le clavier.
sam
139

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>

Josh Mc
la source
9
Firefox 33.1 / Linux: le violon n'affiche que les cases à cocher par défaut. Rien n'est différent.
robsch
1
@robsch Ceci est clairement souligné dans le message d'origine. La version de Firefox ou du système d'exploitation n'est pas pertinente, elle ne fonctionne pas dans Firefox. "FF + IE permettra toujours aux cases à cocher de fonctionner, juste sans style ..."
Josh Mc
Une bonne approche. Mais tous les navigateurs ne le font pas bien. Seul Chrome a la meilleure sortie pour autant que j'ai examiné.
EA
Très agréable. Cependant ... C'est encore une approche IE 5.x. Webkit uniquement. Parce qu'il ne suit pas toujours les règles ... C'est tout le problème avec les navigateurs webkit.
Alex
1
Meilleure solution! +1 Mais je ne vois pas la raison d'écrire un si grand exemple. 30 lignes pour décrire l'idée suffiraient.
Andrii Bogachenko
136

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)

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>

SW4
la source
14
Sauf pour: HTML simplifié, CSS simplifié, explication détaillée.
SW4
4
@AnthonyHayward - réponse mise à jour, cela était dû à l'utilisation de l'affichage: aucun qui n'instancie pas le contrôle de manière tabable, j'ai changé
SW4
1
J'avais du mal à trouver un exemple dans lequel la case à cocher était à l'intérieur de l'étiquette plutôt qu'avant / après. Il s'agit d'une solution très bien documentée et expliquée. Ce serait formidable de voir cette réponse mise à jour pour janvier 2016.
Clarus Dignus
1
Toujours pas tabable avec display: none.
sam
2
Remplacez visibility: hidden;par opacity: 0 !important;si vous rencontrez toujours des problèmes de tabulation.
jabacchetta
40

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.

Jan Turoň
la source
3
Upvote pour couvrir le problème de focus: les personnalisations comme celle-ci ne devraient pas supprimer les fonctionnalités de base. Notez cependant que Safari ne donne pas le focus clavier aux cases à cocher (même celles par défaut), ce qui m'a un peu dérouté lors de l'implémentation d'une solution qui incluait la gestion du focus.
Jason Sankey
Il semble que les cases à cocher dans l'extrait de code ne fonctionnent plus? Sur vitres chromées 10
Félix Gagnon-Grenier
1
Bonne réponse. A fourni la base de ma solution - j'ai utilisé l'étiquette existante après l'entrée où vous avez utilisé une plage supplémentaire et j'obtiens le support Edge & FF.
Jono
2
La plupart de ces réponses ignorent l'accessibilité. J'adore le fait que cette réponse garde cela intact.
maxshuty
1
@maxshuty J'aime aussi votre approche: quand quelqu'un crée une bibliothèque, c'est souvent une confession qu'il ne peut pas coder simplement dans la langue maternelle de son choix. IMHO FontAwesome a bousillé leur plan gratuit en utilisant javascript pour charger la police, mais je les aime toujours car ils restent open source et licence gratuite. Je finis généralement par créer des sous-ensembles d'icônes gratuites dont j'ai besoin dans un projet particulier (généralement 5 Ko maximum). Je paierais volontiers s'ils m'économisaient l'effort, mais pas les 99 $ fous par an comme ils le proposent dans leur plan Pro.
Jan Turoň
30

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!

Jake
la source
28

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:

Entrez la description de l'image ici

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;
}
Mohamed Nor
la source
1
Plus c'est simple, mieux c'est!
Adrian Moisa
Ceci est une excellente réponse, cela fonctionne juste sans avoir besoin de quoi que ce soit supplémentaire
HeavyHead
Bon et très simple
khalidh
Belle solution. Mais je ne le vois pas fonctionner sur Firefox, IE ou Edge (il n'y a pas de case à cocher)
Jono
20

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

Vadim Ovchinnikov
la source
3
J'aime cette approche - c'est un peu hacky car vous ne devriez jamais vraiment utiliser l'apparence en CSS, mais c'est beaucoup plus propre que certaines des autres réponses avant et après. Et pour quelque chose comme ça, je pense que JavaScript est complètement exagéré.
Sprose
18

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.)

Exemple de case à cocher

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.

cobberboy
la source
.... ce que vous avez décrit est le même que les réponses précédentes de Bhushan wagh, Jake, Jonathan Hodgson et Blake;)
SW4
7
@ SW4 J'ai fait référence à ce fait, sauf que cette réponse utilise des polices d'icônes (qu'aucune des réponses précédentes n'avait). Le premier paragraphe le montre assez clairement.
cobberboy
Vous devez remplacer font-family: FontAwesome;par font-family: 'Font Awesome\ 5 Free';et mettre à jour le contenu Unicode si vous souhaitez le faire fonctionner dans une nouvelle version.
Dim
12

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

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

Joost
la source
En effet, appearancec'est exactement ce dont nous avons besoin pour cela; il suffit de garder à l'esprit qu'il "n'est pas standard et n'est pas conforme aux normes" .
sam
12

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>

Volomike
la source
1
Oui! Un seul qui soit vraiment décent.
odinho - Velmont
10

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>

agirault
la source
Si quelqu'un pouvait demander pourquoi mon texte n'est pas aligné après, j'aimerais savoir! Débutant CSS ici.
agirault
8

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;
}
collimarco
la source
1
C'est un exemplaire particulièrement minimaliste qui a fonctionné pour mon cas, merci!
Jason R Stevens CFA
8

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>

maxshuty
la source
J'ai ajouté ma propre réponse ici aussi, j'espère que cela aide quelqu'un. J'ai utilisé le thème dans le mien. :) J'espère que quelqu'un le verra.
M. Polywhirl
6

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;
}
aWebDeveloper
la source
1
Contrairement à la plupart des autres réponses, celle-ci ne nécessite pas la création d' éléments supplémentaires labelou span. Ça marche!
KurtPreston
Pourriez-vous montrer un exemple ou une démo, ou au moins la partie HTML, avec laquelle ce code CSS fonctionne? @aWebDeveloper
Sándor Zuboly
@aWebDeveloper apporter des modifications stupides pour bump une réponse ou une question à la page d'accueil est contraire aux règles.
TylerH
@aWebDeveloper Vous avez modifié une ancienne réponse sur une question inactive, ce qui la renvoie à la première page et fournit un lien direct vers votre réponse. C'est très bien si vous avez des informations pertinentes à ajouter ou à modifier dans une réponse. Tout ce que vous avez fait a été d'incorporer une de vos phrases dans un bloc de devis, ce qui n'est utile à personne.
TylerH
devrait fonctionner @VadimOvchinnikov ... rien ici n'est spécifique au chrome
aWebDeveloper
6

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>

Mahfuzur Rahman
la source
Solution très cool pour les navigateurs qui prennent en charge les pseudo-éléments. :)
Jean-François Beauchamp
6

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>

BEJGAM SHIVA PRASAD
la source
@VadimOvchinnikov Nous avons une solution qui nécessite de suivre une structure html .. stackoverflow.com/questions/23305780/…
BEJGAM SHIVA PRASAD
4

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/

javad shariaty
la source
1
Les pseudo-éléments pour inputs ne sont pris en charge que dans Chrome, votre code ne fonctionne pas de la même manière dans tous les navigateurs.
Vadim Ovchinnikov
4

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.

Jonathan Hodgson
la source
4
La différence entre votre réponse et la mienne est quoi exactement?
Blake Pettersson
@BlakePettersson le vôtre est correct, :: vérifié est tout simplement faux (j'ai même essayé juste au cas où il est également autorisé);)
surtout le
7
C'est une mauvaise réponse. (a) ::checkedest faux - il devrait l'être :checked. (b) checkboxest faux - ça devrait être[type=checkbox]
Chris Morgan
4

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.

Braden Best
la source
Notez que l'implémentation de Canvas, en tant qu'émulation de cases à cocher, permet plus de fonctionnalités que les cases à cocher intégrées. Par exemple, des trucs fantaisistes comme des cases à cocher "multi-états" (c'est-à-dire que unchecked (e.g. unchecked -> checked -> "kinda" checked -> uncheckedles états pourraient représenter "explicitement faux", "explicite vrai", "utiliser par défaut", par exemple). J'envisage d'ajouter un exemple à la réponse.
Braden Best
Terrible idée à mon avis.
@Neil s'il vous plaît élaborer
Braden Best
Pourquoi réinventer la roue?
@Neil pourquoi ne pas réinventer la roue? Le NIH n'est pas toujours une mauvaise chose, surtout lorsqu'il offre des avantages qui seraient autrement impossibles ou stupidement compliqués à mettre en œuvre avec la technologie existante. Il s'agit donc de savoir si vous êtes prêt à gérer les cases à cocher intégrées. Et si je veux leur donner un thème pour se fondre dans le langage visuel de mon site Web ou de mon application, je veux un contrôle total. Donc, jusqu'à ce que quelqu'un crée une bibliothèque d'interface utilisateur autonome, légère et facile à utiliser, je préfère personnellement que mes roues soient inventées ici. Quelqu'un d'autre pourrait ne pas le faire, mais cela n'invalide pas ma réponse.
Braden Best
3

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>
Ali Gonabadi
la source
3

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

Chérir
la source
La case à cocher ne s'affiche pas, car elle repose sur des liens externes vers les fichiers image imgh.us/uncheck.png et imgh.us/check_2.png qui ne sont plus disponibles en ligne.
jkdev
2

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 .

Allan
la source
2
**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;
    }
Sonu Nagar
la source
1
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);
}
Bhushan wagh
la source
Une explication serait de mise.
Peter Mortensen
1

Non, vous ne pouvez toujours pas styliser la case à cocher elle-même, mais j'ai (enfin) compris comment styliser une illusion tout en conservant la fonctionnalité de cliquer sur une case à cocher. Cela signifie que vous pouvez le basculer même si le curseur n'est pas parfaitement immobile sans risquer de sélectionner du texte ou de déclencher un glisser-déposer!

Cette solution convient probablement également aux boutons radio.

Ce qui suit fonctionne dans Internet Explorer 9, Firefox 30.0 et Chrome 40.0.2214.91 et n'est qu'un exemple de base. Vous pouvez toujours l'utiliser en combinaison avec des images d'arrière-plan et des pseudo-éléments.

http://jsfiddle.net/o0xo13yL/1/

label {
    display: inline-block;
    position: relative; /* Needed for checkbox absolute positioning */
    background-color: #eee;
    padding: .5rem;
    border: 1px solid #000;
    border-radius: .375rem;
    font-family: "Courier New";
    font-size: 1rem;
    line-height: 1rem;
}

label > input[type="checkbox"] {
    display: block;
    position: absolute; /* Remove it from the flow */
    width: 100%;
    height: 100%;
    margin: -.5rem; /* Negative the padding of label to cover the "button" */
    cursor: pointer;
    opacity: 0; /* Make it transparent */
    z-index: 666; /* Place it on top of everything else */
}

label > input[type="checkbox"] + span {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 1px solid #000;
    margin-right: .5rem;
}

label > input[type="checkbox"]:checked + span {
    background-color: #666;
}

<label>
    <input type="checkbox" />
    <span>&nbsp;</span>Label text
</label>
LGT
la source
1

Étant donné que les navigateurs comme Edge et Firefox ne prennent pas en charge: avant: après sur les balises d'entrée de case à cocher, voici une alternative purement avec HTML et CSS. Bien sûr, vous devez éditer CSS selon vos besoins.

Faites la case à cocher HTML pour ceci:

<div class='custom-checkbox'>
    <input type='checkbox' />
    <label>
        <span></span>
        Checkbox label
    </label>
</div>

Appliquer ce style pour la case à cocher pour changer l'étiquette de couleur

<style>
    .custom-checkbox {
        position: relative;
    }
    .custom-checkbox input{
        position: absolute;
        left: 0;
        top: 0;
        height:15px;
        width: 50px;    /* Expand the checkbox so that it covers */
        z-index : 1;    /* the label and span, increase z-index to bring it over */
        opacity: 0;     /* the label and set opacity to 0 to hide it. */
    }
    .custom-checkbox input+label {
        position: relative;
        left: 0;
        top: 0;
        padding-left: 25px;
        color: black;
    }
    .custom-checkbox input+label span {
        position: absolute;  /* a small box to display as checkbox */
        left: 0;
        top: 0;
        height: 15px;
        width: 15px;
        border-radius: 2px;
        border: 1px solid black;
        background-color: white;
    }
    .custom-checkbox input:checked+label { /* change label color when checked */
        color: orange;
    }
    .custom-checkbox input:checked+label span{ /* change span box color when checked */
        background-color: orange;
        border: 1px solid orange;
    }
</style>
Muhammad Usman
la source
1

Il semble que vous pouvez modifier la couleur de la case à cocher en niveaux de gris en utilisant uniquement CSS.

Ce qui suit convertit les cases à cocher du noir au gris (ce qui correspondait à ce que je voulais):

input[type="checkbox"] {
    opacity: .5;
}
Ellis
la source
cela fait aussi la lumière de la frontière. aussi, vous ne pouvez pas vraiment voir le chèque si vous le vérifiez.
Rachel S
1

Mise en œuvre SCSS / SASS

Une approche plus moderne

Pour ceux qui utilisent SCSS (ou facilement convertis en SASS), ce qui suit sera utile. Effectivement, créez un élément à côté de la case à cocher, qui est celle que vous allez styliser. Lorsque la case est cochée, le CSS remodèle l'élément frère (selon votre nouveau style coché). Le code est ci-dessous:

label.checkbox {
  input[type="checkbox"] {
    visibility: hidden;
    display: block;
    height: 0;
    width: 0;
    position: absolute;
    overflow: hidden;

    &:checked + span {
      background: $accent;
    }
  }

  span {
    cursor: pointer;
    height: 15px;
    width: 15px;
    border: 1px solid $accent;
    border-radius: 2px;
    display: inline-block;
    transition: all 0.2s $interpol;
  }
}
<label class="checkbox">
    <input type="checkbox" />
    <span></span>
    Label text
</label>

aabbccsmith
la source
0

Attention : ce qui suit était vrai au moment de la rédaction, mais en attendant, les choses ont progressé.

Les navigateurs modernes AFAIK affichent des cases à cocher en utilisant le contrôle natif du système d'exploitation, il n'y a donc aucun moyen de les styliser.

Joril
la source
30
C'était peut-être vrai en '10, mais pas maintenant, vous devriez supprimer cette réponse.
Michał K
3
C'est toujours vrai - tous les navigateurs modernes affichent des cases à cocher utilisant le contrôle natif du système d'exploitation. C'est juste qu'il existe de nouvelles techniques intéressantes pour contourner cette limitation.
Gal
Oui, je parlais de la partie "il n'y a aucun moyen de les styliser" ^^
styliser