web-dev-qa-db-fra.com

Comment remplacer les boutons radio par des images?

J'aimerais, au lieu du bouton radio standard, utiliser des images distinctes pour chaque bouton radio. Pour l'état sélectionné, j'aimerais qu'une bordure apparaisse autour de l'image.

J'ai essayé de créer des étiquettes d'images pour le bouton radio, puis de masquer le bouton, mais cela semble casser la fonctionnalité pour une raison quelconque.

J'ai également rencontré cet article: http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/ que je pourrais potentiellement modifier en quelque sorte à mes fins.

Existe-t-il un moyen plus facile/meilleur?

htmlcssformsradio-button
14
Zach Lysobey

jQuery 

        $('input:radio').hide().each(function() {
            $(this).attr('data-radio-fx', this.name);
            var label = $("label[for=" + '"' + this.id + '"' + "]").text();
            $('<a ' + (label != '' ? 'title=" ' + label + ' "' : '' ) + ' data-radio-fx="'+this.name+'" class="radio-fx" href="#">'+
                '<span class="radio' + (this.checked ? ' radio-checked' : '') + '"></span></a>').insertAfter(this);
        });
        $('a.radio-fx').on('click', function(e) {
            e.preventDefault();
            var unique = $(this).attr('data-radio-fx');
            $("a[data-radio-fx='"+unique+"'] span").attr('class','radio');
            $(":radio[data-radio-fx='"+unique+"']").attr('checked',false);
            $(this).find('span').attr('class','radio-checked');
            $(this).prev('input:radio').attr('checked',true);
        }).on('keydown', function(e) {
            if ((e.keyCode ? e.keyCode : e.which) == 32) {
                $(this).trigger('click');
            }
        });
  • code complet dans la source de démonstration;
22
Luca Filosofi

Oui il y a! Ceci est un exemple des moyens simples:

Pas besoin de javascript

[~ # ~] css [~ # ~] 

.radio_item{
display: none !important;
}

.label_item {
opacity: 0.1;
}

.radio_item:checked + label {
opacity: 1;
}

[~ # ~] html [~ # ~] 

<!--RADIO 1-->
<input type="radio" class="radio_item" value="" name="item" id="radio1">
<label class="label_item" for="radio1"> <img src="img_url_here"> </label>

<!--RADIO 2-->
<input type="radio" class="radio_item" value="" name="item" id="radio2">
<label class="label_item" for="radio2"> <img src="img_url_here"> </label>

VIOLON

30
KeepMove

Je peux proposer deux solutions différentes:

SOLUTION CSS: 

/*
  Hide radio button (the round disc)
  we will use just the label to create Push button effect
*/
input[type=radio] {
    display:none; 
    margin:10px;
}

/*
  Change the look'n'feel of labels (which are adjacent to radio buttons).
  Add some margin, padding to label
*/
input[type=radio] + label {
    display:inline-block;
    margin:-2px;
    padding: 4px 12px;
    background-color: #e7e7e7;
    border-color: #ddd;
}
/*
 Change background color for label next to checked radio button
 to make it look like highlighted button
*/
input[type=radio]:checked + label { 
   background-image: none;
    background-color:#d0d0d0;
}

avec HTML

<input type="radio" id="radio1" name="radios" value="all" checked>
   <label for="radio1">iPhone</label>
<input type="radio" id="radio2" name="radios"value="false">
   <label for="radio2">Galaxy S IV</label>
<input type="radio" id="radio3" name="radios" value="true">
   <label for="radio3">Nexus S</label>

SOLUTION JAVASCRIPT

Démo ici

5
HMagdy

Je ne l'ai pas examiné, mais cela semble prometteur: http://www.thecssninja.com/css/custom-inputs-using-css

3
Christopher Davies

J'ai eu le même problème il y a peu de temps et j'ai trouvé cette solution jQuery qui fonctionne parfaitement et se dégrade bien:

http://www.adamcoulombe.info/lab/jquery/select-box/

Je l'ai utilisé pour sélectionner des listes déroulantes de style personnalisé. Il est très simple à mettre en œuvre. Remplacez la variable de $('.mySelectBoxClass') qui cible la classe à $('select') par exemple - et cela ciblerait tous les éléments de sélection sur votre page. La même règle s'appliquerait aux boutons radio.

2
Dan

Je ne pense pas que vous trouverez un moyen plus simple de le faire que le lien que vous avez ajouté à votre question. C'est le seul moyen que je connaisse. Je pense que vous avez effectivement répondu à votre propre question. N'y a-t-il pas un badge pour ça ou quelque chose?

En outre, une question similaire a été répondu ici: cases à cocher de style, boutons radio et listes déroulantes

Il contient quelques solutions prédéfinies supplémentaires que vous pouvez consulter. Sans plus d'informations sur ce que vous essayez d'accomplir visuellement, je ne peux pas dire si l'un d'eux fonctionnera pour vous.

Bonne chance!

1
Dubmun

Il y a un bug avec la solution de aSeptik où si vous cliquez sur un bouton radio coché, il le désélectionne. Je l'ai corrigé en faisant le réglage ci-dessous.

$('a.radio-fx').on('click', function(e) {
        e.preventDefault();
        if($(this).prev('input:radio').is(':checked')) return;
        ...

alors...

$('input:radio').hide().each(function() {
        $(this).attr('data-radio-fx', this.name);
        var label = $("label[for=" + '"' + this.id + '"' + "]").text();
        $('<a ' + (label != '' ? 'title=" ' + label + ' "' : '' ) + ' data-radio-fx="'+this.name+'" class="radio-fx" href="#">'+
            '<span class="radio' + (this.checked ? ' radio-checked' : '') + '"></span></a>').insertAfter(this);
    });
    $('a.radio-fx').on('click', function(e) {
        e.preventDefault();
        if($(this).prev('input:radio').is(':checked')) return;
        var unique = $(this).attr('data-radio-fx');
        $("a[data-radio-fx='"+unique+"'] span").attr('class','radio');
        $(":radio[data-radio-fx='"+unique+"']").attr('checked',false);
        $(this).find('span').attr('class','radio-checked');
        $(this).prev('input:radio').attr('checked',true);
    }).on('keydown', function(e) {
        if ((e.keyCode ? e.keyCode : e.which) == 32) {
            $(this).trigger('click');
        }
    });

Merci aSeptik pour la grande solution!

1
lbbrooks

solution très simple que j'ai trouvée sur le net.

http://jsbin.com/image-instead-of-radio-button/3/edit?html,css,output

1
eliprodigy