Comment styliser une case à cocher en utilisant CSS?

j'essaie de composer une case à cocher en utilisant ce qui suit:

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

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

682
demandé sur Nemus 0000-00-00 00:00:00
la source

8 ответов

mise à jour: La réponse ci-dessous fait référence à l'état des choses avant la disponibilité généralisée de CSS3. Dans les navigateurs modernes (y compris Internet Explorer 9 et plus tard), 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 les styles (borders, etc.) directement à l' élément de case à cocher et avoir ces styles affecter l'affichage de la case à cocher HTML. Ce qui a changé, cependant, c'est qu'il est maintenant possible de cacher la case à cocher réelle et de la remplacer par un élément stylé de votre propre, en utilisant rien d'autre que CSS. En particulier, parce que CSS dispose désormais d'un sélecteur :checked largement supporté, vous pouvez faire en sorte que votre remplacement reflète correctement l'état de la case cochée.


OLDER ANSWER

un article utile concernant le style des cases à cocher . Fondamentalement ce que cet écrivain a trouvé était qu'il varie énormément d'un navigateur à un navigateur, et que de nombreux navigateurs toujours afficher la case à cocher par défaut peu importe comment vous le style. Donc, il n'y a vraiment pas un moyen facile.

il n'est pas difficile d'imaginer une solution de contournement où vous utiliseriez javascript pour superposer une image sur la case à cocher et avoir des clics sur cette image faire que la vraie case à cocher soit cochée. Les utilisateurs sans javascript verrait la case à cocher par défaut.

édité pour ajouter: voici un beau script qui fait cela pour vous ; il cache l'élément de case à cocher réel, le remplace par une portée stylée, et redirige les événements de clic.

687
répondu Jacob Mattison 2017-02-06 23:49:26
la source

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>
120
répondu Blake Pettersson 2018-09-24 16:13:57
la source

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>
115
répondu Josh Mc 2018-04-26 17:49:45
la source

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

  4. "

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

(à 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>
109
répondu SW4 2018-04-26 17:53:19
la source

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!

27
répondu Jake 2018-04-26 16:58:49
la source

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;
    }
    

Démo Fiddle

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>

essayez de passer la souris au-dessus des cases à cocher et utilisez onglet et Maj + onglet pour se déplacer et espace pour basculer.

23
répondu Jan Turoň 2018-04-26 17:12:45
la source

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 externes et des fichiers
  2. Vous n'avez pas besoin d'ajouter extra HTML dans votre page
  3. vous n'avez pas besoin de changer les noms de cases à cocher et id 151990920"

Simple mettez le CSS coulant en haut de votre page et toutes les cases à cocher style va changer comme ceci:

enter image description here

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: "14";
  padding: -5px;
  font-weight: bold;
}
19
répondu Mohamed Nor 2018-04-26 17:20:38
la source

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

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

checkbox example

comme avec autres solutions, il utilise l'élément label . Un span adjacent tient 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) */
}

/* 
13
répondu
la source

Autres questions sur html css checkbox