Style de bouton radio - pas de travail dans IE et Firefox

J'ai essayé de faire un style de bouton radio. Tout fonctionne bien dans Chrome, mais dans IE et Firefox il y a encore quelques erreurs d'affichage.

Voici le code:

HTML

<input type="radio" id ="light" name="choice" value="none""><label for="light">Light me</label>

CSS

input[type="radio"] {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background:url('http://refundfx.com.au/uploads/image/checkbox_empty.png') center center no-repeat;
background-size: 2em;
width: 2em;
height: 2em;
cursor: pointer;
vertical-align: middle;
}​

Quel est le problème?

Merci beaucoup pour les réponses.

Je conseille que vous n'avez pas cette. Il peut être un peu d'un problème de convivialité.
Vous pouvez ajouter Safari à la liste des navigateurs dans lequel cet exemple ne fonctionne pas 😉
Pouvez-vous préciser ce que vous entendez par "certaines erreurs d'affichage"?
Certains éléments de formulaire ne peut pas être de style grâce à la fiabilité de la cohérence entre les différents navigateurs
Je vous suggère que vous utilisez un plugin jquery pour que. Voir ceci: line25.com/articles/...

OriginalL'auteur Johncze | 2012-11-28

  1. 4

    Essayez ceci: jsfiddle

    Ce que vous devez faire est de cacher le bouton radio et de n'utiliser l'étiquette pour le basculement. Donc, j'ai mis input[type="radio"] à display:none, et déplacé une partie de la CSS à la label sélecteur ou d'un nouveau sélecteur pour le bouton, à qui j'ai donné la classe "bouton":

    HTML:

    <input type="radio" id ="light" name="choice" value="none"">
<label for="light">
<span class="button"></span>
Light me
</label>​​​

    CSS:

    input[type="radio"] {
    display:none;
}
.button {   background:url('http://refundfx.com.au/uploads/image/checkbox_empty.png') center center no-repeat;
    background-size: 2em;
    width: 2em;
    height: 2em;
    float:left;
}
label { 
    cursor: pointer;
    line-height:32px;
}
​

    Voici une bonne marche par le biais de l'esthétique les entrées avec les CSS: http://www.wufoo.com/2011/06/13/custom-radio-buttons-and-checkboxes/

    Thanky vous, c'est gentil de solution, je vais l'utiliser 🙂
    Le problème sur le masquage des éléments d'entrée, c'est qu'ils perdent leur navigation au clavier capacité. Et c'est triste.
    L'autre problème que j'ai trouvé est certains navigateurs ne sera pas afficher un message d'alerte pour les éléments cachés.

    OriginalL'auteur bozdoz