J'ai écrit du code pour aider les cases à cocher "skin" et les boutons radio en utilisant uniquement CSS. Cela fonctionne très très bien ...

.... en chrome.

Cependant, dans FireFox et IE, cela échoue tout simplement. Et je n'ai absolument aucune idée terrestre pourquoi. L’essentiel est de charger un bloc en utilisant :before avant le contenu, puis le place sur leélément par défaut. Bien sûr, il sera remplacé par un sprite, mais je dois d'abord que le comportement de calcul fonctionne. Le code fonctionne comme ça; La façon dont il est présenté en HTML est parce que j'utilise Bootstrapet j’adhère simplement à la façon dont il établit les champs de formulaire. J'ai aussi un violon pour démontrer le problème.

jsBin

Inclut le contenu original LESS.

jsfiddle

Seulement CSS compilé

HTML

<div class="checkbox">
<label>
<input type="checkbox" value="">
<span style="font-size: 24px;">Option</span>
</label>
</div>

MOINS / CSS

.checkbox, .radio {
position: relative;

& + .checkbox {
margin-top: 10px;

&.pull-left {
left: 6px;
}
}

& + .radio {
margin-top: 10px;
left: 20px;
}

input[type="checkbox"] {
&:active, &:hover, &:focus {
&:before,
&::before {
background: yellow;
}
}

&:checked,
&:active:checked,
&:hover:checked,
&:focus:checked {
&:before, &::before {
background: green;
}
}
}

input[type="radio"] {
&:active:before,
&:hover:before,
&:focus:before {
background: yellow;
}

&:checked:before,
&:active:checked:before,
&:hover:checked:before,
&:focus:checked:before {
background: green;
}
}


input[type="radio"] {
&:before, &::before {
opacity: 1;
position: absolute;
content: "";
display: block;
background: black;
height: 24px;
width: 24px;
top: 2px;
}
}

input[type="checkbox"] {
&:before, &::before {
opacity: 1;
position: absolute;
content: "";
display: block;
background: black;
height: 24px;
width: 24px;
top: 2px;
}
}

label {
line-height: 24px;
padding-left: 10px;
}
}

Réponses:

Les anciens navigateurs ne sont malheureusement pas en mesure de styler les boutons radio. Ce que vous devez faire est d’utiliser un plugin tel que http://fronteed.com/iCheck/ qui crée automatiquement des cases à cocher basées sur les divisions que vous pouvez styler vous-même et en cliquant sur celles qui sont synchronisées avec les cases à cocher réelles.