Style CSS pour les cases à cocher

Question

Tout style pour input affecte chaque élément d'entrée. Existe-t-il un moyen de spécifier le style à appliquer uniquement aux cases à cocher sans appliquer une classe à chaque élément de case à cocher ?

Answer 1

input[type="checkbox"] {
 /* your style */
}

Mais cela ne fonctionnera que pour les navigateurs sauf IE7 et inférieurs, pour ceux-ci vous devrez utiliser une classe.

Answer 2

Trident fournit le ::-ms-check pseudo-élément pour les contrôles de cases à cocher et de boutons radio. Par exemple :

<input type="checkbox">
<input type="radio">

::-ms-check {
    color: red;
    background: black;
    padding: 1em;
}

Cela s'affiche comme suit dans IE10 sous Windows 8 :

Answer 3

Bien que les feuilles de style en cascade (CSS) permettent d'appliquer un style spécifique au type de case à cocher ou à un autre type, les navigateurs qui ne prennent pas en charge cette fonctionnalité vont rencontrer des problèmes.

Je pense que votre seule option dans ce cas va être d'appliquer des classes à vos cases à cocher.

il suffit d'ajouter le class="checkbox" à vos cases à cocher.

Créez ensuite ce style dans votre code css.

Une chose que vous pourriez faire est la suivante :

main.css

input[type="checkbox"] { /* css code here */ }

ie.css

.checkbox{ /* css code here for ie */ }

Utilisez ensuite le css include spécifique à IE :

<!--[if lt IE 7]>
   <link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

Vous devrez toujours ajouter la classe pour qu'elle fonctionne dans IE, et elle ne fonctionnera pas dans les autres navigateurs qui ne prennent pas en charge IE. Mais cela permettra à votre site Web d'être à l'avant-garde en matière de code css et, lorsque IE sera pris en charge, vous pourrez supprimer le code css spécifique à IE ainsi que les classes css des cases à cocher.

Answer 4

Merci à tous ceux qui ont contribué à cet article. Jetez un coup d'œil à ce que j'ai pu accomplir en utilisant du pur CSS.

input[type=checkbox] {
  position: absolute;
  cursor: pointer;
  width: 0px;
  height: 0px;
}

input[type=checkbox]:checked:before {
      content: "";
  display: block;
  position: absolute;
  width: 34px;
  height: 34px;
  border: 4px solid #FFCB9A;
  border-radius: 20px;
  background-color: #445768;  
  transition: all 0.2s linear;
}

input[type=checkbox]:before {
  content: "";
  display: block;
  position: absolute;
  width: 34px;
  height: 34px;
  border: 4px solid #FFCB9A;
  border-radius: 3px;
  background-color: #445768;
}

input[type=checkbox]:after {
  content: "";
  display: block;
  width: 0px;
  height: 0px;
  border: solid #FFCB9A;
  border-width: 0 0px 0px 0;
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
  position: absolute;
  top: 0px;
  left: 50px;
  transition: all 0.2s linear;
}

input[type=checkbox]:checked:after {
  content: "";
  display: block;
  width: 12px;
  height: 21px;
  border: solid #FFCB9A;
  border-width: 0 5px 5px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 2px;
  left: 14px;
}

<input type="checkbox">

RÉSUMÉ

Ce qui suit contrôle la case à cocher actuelle que nous avons masquée en ajoutant h:0 & w:0.

input[type=checkbox] {...}

Et le reste contrôle la case à cocher virtuelle.

Ce paramètre permet de contrôler l'arrière-plan de la case à cocher virtuelle lorsqu'elle est cochée.

input[type=checkbox]:checked:before {...}

Ce paramètre contrôle l'arrière-plan de la case à cocher virtuelle lorsqu'elle n'est pas cochée.

input[type=checkbox]:before {...}

Ce paramètre contrôle l'avant-plan de la case à cocher virtuelle lorsqu'elle n'est pas cochée.

input[type=checkbox]:after {...}

Ce paramètre contrôle l'avant-plan de la case à cocher virtuelle lorsqu'elle est cochée.

input[type=checkbox]:checked:after {...}

---

J'espère vraiment que cela vous aidera autant que cela m'a aidé :)

Answer 5

Étant donné qu'IE6 ne comprend pas les sélecteurs d'attributs, vous pouvez combiner un script uniquement vu par IE6 (avec des commentaires conditionnels) et jQuery ou IE7.js par Dean Edwards.

IE7(.js) est une bibliothèque JavaScript permettant à Microsoft Internet Explorer de se comporter comme un navigateur conforme aux normes. Elle corrige de nombreux problèmes HTML et CSS et fait fonctionner correctement les PNG transparents sous IE5 et IE6.

Le choix d'utiliser des classes, jQuery ou IE7.js dépend de vos goûts et de vos autres besoins (par exemple, la transparence PNG-24 sur l'ensemble de votre site sans avoir à recourir au PNG-8 avec une transparence totale qui se réduit à une transparence de 1 bit sur IE6 - uniquement créé par Fireworks et pngnq, etc.)