Style d'entrée des cases à cocher CSS

Tout style pour inputaffecte 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?

Avec CSS 2, vous pouvez faire ceci:

input[type='checkbox'] { ... }

Cela devrait être assez largement soutenu maintenant. Voir le support pour les navigateurs

Je crée ma propre solution sans étiquette

input[type=checkbox] {
         position: relative;
	       cursor: pointer;
    }
    input[type=checkbox]:before {
         content: "";
         display: block;
         position: absolute;
         width: 16px;
         height: 16px;
         top: 0;
         left: 0;
         border: 2px solid #555555;
         border-radius: 3px;
         background-color: white;
}
    input[type=checkbox]:checked:after {
         content: "";
         display: block;
         width: 5px;
         height: 10px;
         border: solid black;
         border-width: 0 2px 2px 0;
         -webkit-transform: rotate(45deg);
         -ms-transform: rotate(45deg);
         transform: rotate(45deg);
         position: absolute;
         top: 2px;
         left: 6px;
}

<input type="checkbox" name="a">
<input type="checkbox" name="a">
<input type="checkbox" name="a">
<input type="checkbox" name="a">

input[type=checkbox] {
         position: relative;
	       cursor: pointer;
    }
    input[type=checkbox]:before {
         content: "";
         display: block;
         position: absolute;
         width: 20px;
         height: 20px;
         top: 0;
         left: 0;
         background-color:#e9e9e9;
}
input[type=checkbox]:checked:before {
         content: "";
         display: block;
         position: absolute;
         width: 20px;
         height: 20px;
         top: 0;
         left: 0;
         background-color:#1E80EF;
}
    input[type=checkbox]:checked:after {
         content: "";
         display: block;
         width: 5px;
         height: 10px;
         border: solid white;
         border-width: 0 2px 2px 0;
         -webkit-transform: rotate(45deg);
         -ms-transform: rotate(45deg);
         transform: rotate(45deg);
         position: absolute;
         top: 2px;
         left: 6px;
}

<input type="checkbox" name="a">
<input type="checkbox" name="a">
<input type="checkbox" name="a">
<input type="checkbox" name="a">

Quelque chose que j'ai récemment découvert pour le style des boutons radio ET des cases à cocher. Avant, je devais utiliser jQuery et d'autres choses. Mais c'est stupidement simple.

input[type=radio] {
    padding-left:5px;
    padding-right:5px;
    border-radius:15px;

    -webkit-appearance:button;

    border: double 2px #00F;

    background-color:#0b0095;
    color:#FFF;
    white-space: nowrap;
    overflow:hidden;

    width:15px;
    height:15px;
}

input[type=radio]:checked {
    background-color:#000;
    border-left-color:#06F;
    border-right-color:#06F;
}

input[type=radio]:hover {
    box-shadow:0px 0px 10px #1300ff;
}

Vous pouvez faire la même chose pour une case à cocher, évidemment changer le input[type=radio]en input[type=checkbox]et changer border-radius:15px;en border-radius:4px;.

J'espère que cela vous sera quelque peu utile.

Les cours fonctionnent également bien, tels que:

<style>
  form input .checkbox
  {
    /* your checkbox styling */
  }
</style>

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

Vous pouvez appliquer uniquement à certains attributs en faisant:

input[type="checkbox"] {...}

Ça l'explique ici .

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

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

Trident fournit le ::-ms-checkpseudo-élément pour les commandes de case à cocher et de bouton 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:

Comme 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. Il corrige de nombreux problèmes HTML et CSS et permet au PNG transparent de fonctionner correctement sous IE5 et IE6.

Le choix d'utiliser des classes ou jQuery ou IE7.js dépend de vos goûts et dégoûts et de vos autres besoins (peut-être la transparence PNG-24 sur tout votre site sans avoir à compter sur PNG-8 avec une transparence complète qui se replie sur la transparence 1 bit sur IE6 - créé uniquement par Fireworks et pngnq, etc.)

Bien que CSS vous fournisse un moyen de créer le style spécifique au type de case à cocher ou à un autre type, il y aura des problèmes avec les navigateurs qui ne le prennent pas en charge.

Je pense que votre seule option dans ce cas sera d'appliquer des cours à vos cases à cocher.

ajoutez simplement la classe = "case à cocher" à 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 */ }

Ensuite, utilisez le css 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 d'autres navigateurs non-IE qui ne prennent pas en charge IE. Mais cela rendra votre site Web avant-gardiste avec le code css et au fur et à mesure que IE sera pris en charge, vous pourrez supprimer le code css spécifique ie ainsi que les classes css des cases à cocher.