Image Principale

Personnaliser des inputs Radio


Pour le besoin d'un développement spécifique, nous avons parfois besoin de personnaliser nos inputs de type radio, c'est à dire les boutons qui permettent de faire un choix. Dans cet article, nous verrons qu'il est possible de le faire simplement.

Contact Person Mathieu Marteau
il y a 3 ans

Pour cet article, nous voulons arriver à ce résultat là:

I La partie HTML

Commençons d'abord par la partie HTML. Nous allons utiliser un simple formulaire pour notre exemple:

<form>
    <div id="Choix">
        <label for="Choix1">Choix 1</label>
        <input id="Choix1" type="radio" name="choix" value="1" />
        <label for="Choix2">Choix 2</label>
        <input id="Choix2" type="radio" name="choix" value="2" />
    </div>
</form>

Comme vous pouvez le voir, j'ai deux boutons input, qui ont le même attribut name. Cela permet de les lier, quand un bouton est cliqué, l'autre n'est plus actif. L'utilisateur doit donc faire un choix entre des deux valeurs.

II Ajout du CSS

Commençons donc à ajouter du CSS à notre petit formulaire, afin d'avoir les boites que l'on veut.

Si vous faites des tests de votre côté, vous allez vous rendrez compte que quand vous cliquez sur "Choix 1" ou "Choix 2", c'est comme si vous cliquiez sur le petit bouton.

Nous allons donc tâcher de toucher au css des labels, et de faire disparaître nos petits cercles qui ne sont plus utiles pour nous:

// On fait disparaitre le petit cercle cliquable
#Choix input{
    display:none;
}
// On ajoute du style à nos labels
#Choix label{
    display:inline-block;
    text-align:center;
    padding:20px 27px;
    cursor:pointer;
    border: rgb(196, 196, 196) 1px solid;
    color:rgb(86, 90, 92);
}

Il ne nous reste plus qu'à définir une classe active à ajouter au label quand celui-ci est sélectionné:

#Choix label.active{
    background:rgb(50, 149, 159);
    color:white;
}   

III Un peu de Javascript

Pour nous simplifier la page, je vais utiliser jQuery. Pour l'utiliser vous aussi, il suffit d'ajouter cette ligne à la fin de votre fichier, juste avant la fermeture de la balise body:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

Maintenant, nous voulons effectuer des actions lorsque l'utilisateur change la boîte qu'il souhaite sélectionner:

$(function() {
    // Lorsque la valeur d'un input change
    $('#Choix input').change(function(){ 
        // On stocke l'id de l'input dans une variable
        var id = $(this).attr('id');
        // On déselectionne toutes les boites
        $('#Choix label').removeClass('active');
        // On sélectionne la bonne boite et on lui ajoute la classe "active"
        $('#Choix label[for=' + id + ']').addClass('active');
    })
});

Et c'est terminé! Vous avez enfin le résultat suivant avec tout le code: