web-dev-qa-db-fra.com

Faire en sorte que les boutons radio ressemblent à des boutons

J'aimerais avoir un ensemble de boutons radio pour un formulaire de don, mais je veux qu'ils ressemblent à des boutons au lieu des cadrans circulaires.

Quelle est la meilleure approche pour faire quelque chose comme ça? Aussi, gardez à l'esprit, cela doit fonctionner avec IE8.

Voici ce que j'ai jusqu'à présent, http://jsfiddle.net/YB8UW/ 

.donate-now {
     list-style-type:none;
     margin:25px 0 0 0;
     padding:0;
}

.donate-now li {
     float:left;
     margin:0 5px 0 0;
}

.donate-now label {
     padding:5px;
     border:1px solid #CCC; 
     cursor:pointer;
}

.donate-now label:hover {
     background:#DDD;
}

Je vous remercie

jqueryhtmlcss
35
Richard

Cela peut être fait avec CSS et sans la nécessité d'un grand framework. Je l'ai fait avec des cases à cocher et des boutons radio.

Ceci fonctionne sans ajouter de nouveau HTML, ni importer aucune bibliothèque JS. => jsFiddle

LE NOUVEL ORDRE DU HTML

<ul class="donate-now">
<li>
    <input type="radio" id="a25" name="amount" />
    <label for="a25">$25</label>
</li>
<li>
    <input type="radio" id="a50" name="amount" />
    <label for="a50">$50</label>
</li>
<li>
    <input type="radio" id="a75" name="amount" checked="checked" />
    <label for="a75">$75</label>
</li>
<li>
    <input type="radio" id="a100" name="amount" />
    <label for="a100">$100</label>
</li>
<li>
    <input type="radio" id="other" name="amount" />
    <label for="other">other:</label>
</li>
<li>
    <input type="text" id="otherAmount" name="numAmount" />
</li>
</ul>

LE CSS

.donate-now {
     list-style-type:none;
     margin:25px 0 0 0;
     padding:0;
}

.donate-now li {
     float:left;
     margin:0 5px 0 0;
    width:100px;
    height:40px;
    position:relative;
}

.donate-now label, .donate-now input {
    display:block;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
}

.donate-now input[type="radio"] {
    opacity:0.01;
    z-index:100;
}

.donate-now input[type="radio"]:checked + label,
.Checked + label {
    background:yellow;
}

.donate-now label {
     padding:5px;
     border:1px solid #CCC; 
     cursor:pointer;
    z-index:90;
}

.donate-now label:hover {
     background:#DDD;
}

Ceci est la version hacky de dix minutes, vous pouvez le nettoyer encore plus loin, mais cela montre un bon exemple de sa simplicité.

88
PlantTheIdea

EDIT: _ ​​ce n'est pas une solution si vous avez besoin de supporter les navigateurs IE.}

Vous pouvez utiliser la propriété d'apparence CSS:

VOIR LA DÉMO

-webkit-appearance: button; /* WebKit */
-moz-appearance: button; /* Mozilla */
-o-appearance: button; /* Opera */
-ms-appearance: button; /* Internet Explorer */
appearance: button; /* CSS3 */
6
A. Wolff

OR SI VOUS VOULEZ LE FAIRE VOUS-MÊME ...

Ce que je ferais serait de créer les boutons avec l'élément <button> et un élément de champ de formulaire masqué pour se rappeler lequel est "enfoncé" comme ceci:

<button type="button" id="btn1">Choice 1</button>
<button type="button" id="btn2">Choice 2</button>
<button type="button" id="btn3">Choice 3</button>
<input type="hidden" id="btnValue" value="" />

Vous allez CSS pour montrer que le bouton est "enfoncé" ou non "enfoncé", vous auriez donc besoin par défaut de ressembler à ceci:

button
{
    border-width: 2px;
    border-style: outset;
    border-color: /*Insert a darker version of your button color here*/
}

Puis dans jQuery (si vous pouvez le faire dans jQuery, vous pouvez le faire en JavaScript, donc gardez cela à l’esprit si vous ne voulez pas utiliser jQuery):

$("#btn1").click(function () {
    $(this).css("border-style", "inset")
    $("#btn2").css("border-style", "outset;");
    $("#btn3").css("border-style", "outset;");
    $("btnValue").val("btn1IsPressed");
});
$("#btn2").click(function () {
    $(this).css("border-style", "inset")
    $("#btn1").css("border-style", "outset;");
    $("#btn3").css("border-style", "outset;");
    $("btnValue").val("btn2IsPressed");
});
$("#btn3").click(function () {
    $(this).css("border-style", "inset")
    $("#btn1").css("border-style", "outset;");
    $("#btn2").css("border-style", "outset;");
    $("btnValue").val("btn3IsPressed");
});

Il ne vous reste plus qu'à demander la valeur à #btnValue après POST (ou GET ou quoi que ce soit d'autre), comme vous le feriez normalement pour dire sur quel "bouton" ils avaient appuyé.

Sachez que vous aurez besoin d'ajouter un peu plus de fonctionnalités pour "désappuyer" sur les boutons, mais je pense que vous comprenez le point. Tout ce que vous avez à faire est de lire la valeur de #btnValue au clic et, avec vos autres instructions, d’utiliser une branche if pour gérer si elle est déjà appuyée ou non et de changer de cadre en conséquence (n'oubliez pas de supprimer ("") la valeur de #btnValue sur le "relâchement" d'un bouton afin que vous puissiez savoir s'ils les ont tous laissés non pressés ou non).

1
VoidKing

Malheureusement, vous ne pouvez pas attribuer de style aux boutons radio directement dans un navigateur. Pour ce faire, utilisez des éléments <label> avec des attributs for correctement définis, puis masquez le bouton radio lui-même à l'aide de visibility: hidden plutôt que de display: none. Vous pouvez ensuite positionner les étiquettes où vous voulez et elles serviront de boutons radio. Vous aurez besoin d'un peu de javascript pour contrôler le style des étiquettes en fonction de l'état de l'élément <input> car IE8 ne prend pas en charge les pseudoclasses CSS avancées telles que :checked.

C'est un peu un bidouillage, mais c'est la seule façon d'utiliser des boutons radio natifs avec des graphiques personnalisés tout en préservant l'accessibilité.

1
nullability

Essayez cette logique simple avec jQuery.

Html:

<div class="radio-btn-row">
    <div class="radio-btn-wrapper">
        <button id="bt1" class="radio-btn" type="button">Button 1</button>
    </div>
    <div class="radio-btn-wrapper">
        <button id="btn2" class="radio-btn" type="button">Button 2</button>
    </div>
    <div class="radio-btn-wrapper">
        <button id="btn3" class="radio-btn" type="button">Button 3</button>
    </div>
    <div class="radio-btn-wrapper">
        <button id="btn4" class="radio-btn" type="button">Button 4</button>
    </div>
    <!--No matter how many buttons do you want -->
</div>

js:

    $.each($('.radio-btn'), function (key, value) {
        $(this).click(function (e) {
            $('.radio-btn-selected')
                .removeClass('radio-btn-selected')
                .addClass('radio-btn');

            $(this)
                .removeClass('radio-btn')
                .addClass('radio-btn-selected');

            //do whatever you want on click
        });
    });

css:

.radio-btn-row{
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: 20px;
}

.radio-btn-wrapper{
  margin: 0px 4px;
}

.radio-btn{
  background-color: #FFFFFF;
  border: 1px solid #4A4A4A;
  color: #4A5362;   
  font-size: 14px;  
  line-height: 26px;    
  outline: none;
}

.radio-btn-selected{
  background-color: #FFFFFF;
  border: 1px solid #55BC7E;
  color: #55BC7E;
  font-size: 14px;  
  line-height: 26px;    
  outline: none;
}
0
Serenkiy