web-dev-qa-db-fra.com

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

Je souhaite créer un formulaire HTML pour les commentaires des utilisateurs . Si les commentaires sont globalement bons, l'utilisateur doit cliquer sur un smiley riant.

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!

htmlcssforms
41
learning-html

Restons simples, allons-nous. Tout d'abord, en utilisant du HTML pur + 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 se dégradera bien s'il n'y a pas de JavaScript. Utilisez les attributs id et for pour lier l'étiquette et le radiobutton de sorte que, lorsque l'image est sélectionnée, le radiobutton correspondant soit rempli. Ceci est important car nous devrons masquer le radiobutton réel à l'aide de JavaScript. Passons maintenant à la bonté jQuery. Tout d'abord, créer le CSS dont nous aurons besoin: 

.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 n'utilisons pas display: none ici est pour des raisons d'accessibilité. Voir: http://www.jsfiddle.net/yijiang/Zgh24/1 pour une démonstration en direct, avec quelque chose de plus sophistiqué. 

66
Yi Jiang

Vous pouvez tirer parti de CSS3 pour cela, en masquant le bouton radio d’entrée by-default avec les règles CSS3:

.class-selector input{
    margin:0;padding:0;
    -webkit-appearance:none;
       -moz-appearance:none;
            appearance:none;
}

Et ensuite, en utilisant des étiquettes pour les images comme démos suivantes:

JSFiddle Demo 1

From top to bottom: Unfocused, MasterCard Selected, Visa Selected, Mastercard hovered

JSFiddle Demo 2

Visa selected

Gist - Comment utiliser les images pour les boutons radio

29
Richard Cotrina

Voici une solution pure HTML + CSS.

HTML:

<div class="image-radio">
  <input type="radio" value="true" checked="checked" name="ice_cream" id="ice_cream_Vanilla">
  <label for="ice_cream_Vanilla">Vanilla</label>
  <input type="radio" value="true" name="ice_cream" id="ice_cream_chocolate">
  <label for="ice_cream_chocolate">Chocolate</label>
</div>

SCSS:

  // use an image instead of the native radio widget
.image-radio {   
  input[type=radio] {
    display: none;
  }
  input[type=radio] + label {
    background: asset-url('icons/choice-unchecked.svg') no-repeat left;
    padding-left: 2rem;
  }
  input[type=radio]:checked + label {
    background: asset-url('icons/choice-checked.svg') no-repeat left;
  }
}
3
AlexChaffee

Avec du code 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>
2
David Thomas

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>
1
Can

Les images peuvent être placées à la place des boutons radio en utilisant des éléments d'étiquette et d'étendue.

   <div class="customize-radio">
        <label>Favourite Smiley</label>
        <br>
        <label for="hahaha">
          <input type="radio" name="smiley" id="hahaha">
          <span class="haha-img"></span>
          HAHAHA
        </label>
        <label for="kiss">
          <input type="radio" name="smiley" id="kiss">
          <span class="kiss-img"></span>
          Kiss
        </label>
        <label for="tongueOut">
          <input type="radio" name="smiley" id="tongueOut">
          <span class="tongueout-img"></span>
          TongueOut
        </label>
    </div>

Le bouton radio doit être caché,

.customize-radio label > input[type = 'radio'] {
    visibility: hidden;
    position: absolute;
}

L'image peut être donnée dans la balise span,

.customize-radio label > input[type = 'radio'] ~ span{
    cursor: pointer;
    width: 27px;
    height: 24px;
    display: inline-block;
    background-size: 27px 24px;
    background-repeat: no-repeat;
}
.haha-img {
    background-image: url('hahabefore.png');
}

.kiss-img{
    background-image: url('kissbefore.png');
}
.tongueout-img{
    background-image: url('tongueoutbefore.png');
}

Pour changer l'image au clic du bouton radio, ajoutez l'état coché à la balise d'entrée,

.customize-radio label > input[type = 'radio']:checked ~ span.haha-img{
     background-image: url('haha.png');
}
.customize-radio label > input[type = 'radio']:checked ~ span.kiss-img{
    background-image: url('kiss.png');
}
.customize-radio label > input[type = 'radio']:checked ~ span.tongueout-img{
        background-image: url('tongueout.png');
}

Si vous avez des questions, reportez-vous au lien suivant, Comme j'ai pris la solution du blog ci-dessous, http://frontendsupport.blogspot.com/2018/06/cool-radio-buttons-with-images .html

0
Beginner

une autre solution consiste à utiliser un script/une bibliothèque de remplacement de formulaire . Ils cachent généralement l'élément d'origine et les remplacent par un div ou une étendue, que vous pouvez styler de la manière qui vous convient.

Les exemples sont:

http://customformelements.net (basé sur mootools) http://www.htmldrive.net/items/show/481/jQuery-UI-Radiobutton-und-Checkbox-Replacement.html

0
Makibo

Vous ne pouvez pas styler 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>
0
Explosion Pills

Utilisez jQuery. Gardez 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 à votre liste d'éléments. 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é!

0
Claudiu

Face au même problème, j'ai créé un simple plugin jQuery http://xypaul.github.io/radioimg.js/

Cela fonctionne en utilisant des boutons radio cachés et des étiquettes contenant des images comme indiqué ci-dessous.

<input type="radio" style="display: none;" id="a" />
<label for="a">
   <img class="" />
</label>
0
Paul