Comment styler les boutons radio avec des images - smiley qui rit pour le bien, smiley triste pour le mal?

Question

J'aimerais créer un formulaire HTML pour les commentaires des utilisateurs. Si le retour d’ensemble est bon, l’utilisateur doit cliquer sur un smiley riant. Si le retour d’ensemble est mauvais, il doit choisir un smiley triste.

Je pense que cela devrait être fait en utilisant des boutons radio, avec les smileys au lieu des boutons radio. Peut-être que je me trompe cependant ...

Savez-vous comment je peux y arriver?

Merci!

Answer 1

Nous allons les garder simple, allons-nous. Tout d'abord, à l'aide du pur HTML + CSS:

<div id="emotion">
    <input type="radio" name="emotion" id="sad" />
        <label for="sad"><img src="sad_image.png" alt="I'm sad" /></label>

    <input type="radio" name="emotion" id="happy" />
        <label for="happy"><img src="happy_image.png" alt="I'm happy" /></label>
</div>

Cela va dégrader gentiment si il n'y a pas de JavaScript. Utiliser id et for attributs de lier l'étiquette et radiobutton de sorte que lorsque l'image est sélectionnée, le bouton radio correspondant sera rempli. Ceci est important parce que nous allons avoir besoin de cacher la véritable radiobutton à l'aide de JavaScript. Maintenant, pour certains, jQuery bonté. Tout d'abord, la création du CSS nous aurons besoin de:

.input_hidden {
    position: absolute;
    left: -9999px;
}

.selected {
    background-color: #ccc;
}

#emotion label {
    display: inline-block;
    cursor: pointer;
}

#emotion label img {
    padding: 3px;
}

Maintenant pour le JavaScript:

$('#emotion input:radio').addClass('input_hidden');
$('#emotion label').click(function(){
    $(this).addClass('selected').siblings().removeClass('selected');
});

La raison pour laquelle nous ne sommes pas à l'aide de display: none ici pour des raisons d'accessibilité. Voir: http://www.jsfiddle.net/yijiang/Zgh24/1 pour une démo, avec quelque chose de plus de fantaisie.

Answer 2

Avec du html pur (pas de JS), vous ne pouvez pas vraiment remplacer un bouton radio par une image (du moins, je ne pense pas que vous puissiez le faire). Vous pouvez cependant utiliser les éléments suivants pour établir la même connexion avec l'utilisateur:

 <form action="" method="post">
    <fieldset>
       <input type="radio" name="feeling" id="feelingSad" value="sad" /><label for="feelingSad"><img src="path/to/sad.png" /></label>
       <label for="feelingHappy"><input type="radio" name="feeling" id="feelingHappy" value="happy" /><img src="path/to/happy.png" /></label>
    </fieldset>
</form>
 

Answer 3

J'ai édité l'un des post précédent. Maintenant, c'est beaucoup plus simple et cela fonctionne parfaitement.

 <input style="position: absolute;left:-9999px;" type="radio" name="emotion" id="sad" />
<label for="sad"><img src="red.gif" style="display: inline-block;cursor: pointer;padding: 3px;" alt="I'm sad" /></label>

<input  style="position: absolute;left:-9999px;" type="radio" name="emotion" id="happy" />
<label for="happy"><img src="blue.gif" style="display: inline-block;cursor: pointer;padding: 3px;" alt="I'm happy" /></label>
 

Answer 4

Vous ne pouvez pas attribuer de style à des éléments tels que des boutons radio, des cases à cocher, des barres de défilement (etc.). Celles-ci sont natives du système d'exploitation et du navigateur et ne peuvent pas être manipulées.

Vous pouvez simuler ceci, cependant en masquant les boutons radio et en ne montrant qu'une image à la place de.

 <input type="radio" style="display: none;" id="sad" /><label for="sad"><img class="sad_image" /></label>
 

Answer 5

Utilisez jQuery. Laissez vos éléments de case à cocher masqués et créez une liste comme celle-ci:

 <ul id="list">
    <li><a href="javascript:void(0)" id="link1">Happy face</a></li>
    <li><a href="javascript:void(0)" id="link2">Sad face</a></li>
</ul>

<form action="file.php" method="post">
    <!-- More code -->
    <input type="radio" id="option1" name="radio1" value="happy" style="display:none"/>
    <input type="radio" id="option2" name="radio1" value="sad" style="display:none"/>
    <!-- More code -->
</form>

<script type="text/javascript">
$("#list li a").click(function() {
    $('#list .active').removeClass("active");
    var id = this.id;
    var newselect = id.replace('link', 'option');
    $('#'+newselect).attr('checked', true);
    $(this).addClass("active").parent().addClass("active");
    return false;
});
</script>
 

Ce code ajouterait l'attribut vérifié à vos entrées radio en arrière-plan et attribuerait la classe active à vos éléments de liste. N'utilisez bien sûr pas les styles en ligne, n'oubliez pas d'inclure jQuery et tout devrait être prêt à l'emploi une fois que vous l'avez personnalisé.

À votre santé!