Comment faire en sorte qu'un bouton radio ressemble à un bouton à bascule ?

Question

Je souhaite qu'un groupe de boutons radio ressemble à un groupe de boutons à bascule (tout en fonctionnant comme des boutons radio). Il n'est pas nécessaire qu'ils ressemblent exactement à des boutons à bascule.

Comment puis-je faire cela uniquement avec CSS et HTML ?

EDIT : Je me contenterai de faire disparaître le petit cercle et de changer le style lorsque le bouton est coché/décoché.

Answer 1

Selon les navigateurs que vous souhaitez prendre en charge, vous pouvez utiliser l'option :checked pseudo-classe en plus de masquer les boutons radio.

En utilisant ce HTML :

<input type="radio" id="toggle-on" name="toggle" checked
><label for="toggle-on">On</label
><input type="radio" id="toggle-off" name="toggle"
><label for="toggle-off">Off</label>

Vous pourriez utiliser quelque chose comme le CSS suivant :

input[type="radio"].toggle {
  display: none;
}

input[type="radio"].toggle:checked + label {
  /* Do something special with the selected state */
}

Par exemple, (pour que le CSS personnalisé reste bref) si vous utilisez Bootstrap vous pourriez ajouter class="btn" à votre <label> et de les styliser de manière appropriée pour créer une bascule qui ressemble à ceci :

...qui ne nécessite que le CSS supplémentaire suivant :

input[type="radio"].toggle:checked + label {
  background-image: linear-gradient(to top,#969696,#727272);
  box-shadow: inset 0 1px 6px rgba(41, 41, 41, 0.2),
                    0 1px 2px rgba(0, 0, 0, 0.05);
  cursor: default;
  color: #E6E6E6;
  border-color: transparent;
  text-shadow: 0 1px 1px rgba(40, 40, 40, 0.75);
}

input[type="radio"].toggle + label {
  width: 3em;
}

input[type="radio"].toggle:checked + label.btn:hover {
  background-color: inherit;
  background-position: 0 0;
  transition: none;
}

input[type="radio"].toggle-left + label {
  border-right: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

input[type="radio"].toggle-right + label {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

Je l'ai inclus, ainsi que les styles de repli supplémentaires, dans un fichier bouton radio à basculer jsFiddle demo . Notez que :checked n'est pris en charge que par IE 9, de sorte que cette approche est limitée aux navigateurs plus récents.

Toutefois, si vous devez prendre en charge IE 8 et que vous êtes prêt à vous rabattre sur JavaScript*, vous pouvez intégrer une pseudo-prise en charge de :checked sans trop de difficulté (bien que vous puissiez tout aussi bien définir les classes directement sur l'étiquette à ce stade).

En utilisant un code jQuery rapide et sale comme un exemple de la solution de contournement :

$('.no-checkedselector').on('change', 'input[type="radio"].toggle', function () {
    if (this.checked) {
        $('input[name="' + this.name + '"].checked').removeClass('checked');
        $(this).addClass('checked');
        // Force IE 8 to update the sibling selector immediately by
        // toggling a class on a parent element
        $('.toggle-container').addClass('xyz').removeClass('xyz');
    }
});
$('.no-checkedselector input[type="radio"].toggle:checked').addClass('checked');

Vous pouvez ensuite apporter quelques modifications au CSS pour compléter les choses :

input[type="radio"].toggle {
  /* IE 8 doesn't seem to like to update radio buttons that are display:none */
  position: absolute;
  left: -99em;
}

input[type="radio"].toggle:checked + label,
input[type="radio"].toggle.checked + label {
  /* Do something special with the selected state */
}

_{*Si vous utilisez Modernizr, vous pouvez utiliser l'option <a href="https://gist.github.com/paulirish/441842" rel="noreferrer"><code>:selector</code> test </a>pour aider à déterminer si vous avez besoin de la solution de repli. J'ai appelé mon test "checkedselector" dans le code de l'exemple, et le gestionnaire d'événements jQuery n'est ensuite mis en place que lorsque le test échoue.}

Answer 2

Voici ma version de l'exemple de solution CSS JS Fiddle publié plus haut.

http://jsfiddle.net/496c9/

HTML

<div id="donate">
    <label class="blue"><input type="radio" name="toggle"><span>$20</span></label>
    <label class="green"><input type="radio" name="toggle"><span>$50</span></label>
    <label class="yellow"><input type="radio" name="toggle"><span>$100</span></label>
    <label class="pink"><input type="radio" name="toggle"><span>$500</span></label>
    <label class="purple"><input type="radio" name="toggle"><span>$1000</span></label>
</div>

CSS

body {
    font-family:sans-serif;
}

#donate {
    margin:4px;

    float:left;
}

#donate label {
    float:left;
    width:170px;
    margin:4px;
    background-color:#EFEFEF;
    border-radius:4px;
    border:1px solid #D0D0D0;
    overflow:auto;

}

#donate label span {
    text-align:center;
    font-size: 32px;
    padding:13px 0px;
    display:block;
}

#donate label input {
    position:absolute;
    top:-20px;
}

#donate input:checked + span {
    background-color:#404040;
    color:#F7F7F7;
}

#donate .yellow {
    background-color:#FFCC00;
    color:#333;
}

#donate .blue {
    background-color:#00BFFF;
    color:#333;
}

#donate .pink {
    background-color:#FF99FF;
    color:#333;
}

#donate .green {
    background-color:#A3D900;
    color:#333;
}
#donate .purple {
    background-color:#B399FF;
    color:#333;
}

Stylé avec des boutons de couleur :)

Answer 3

Voici la solution qui fonctionne pour tous les navigateurs (également IE7 et IE8 ; je n'ai pas vérifié pour IE6) :

http://jsfiddle.net/RkvAP/230/

HTML

<div class="toggle">
    <label><input type="radio" name="toggle"><span>On</span></label>    
</div>
<div class="toggle">
    <label><input type="radio" name="toggle"><span>Off</span></label>
</div>

JS

$('label').click(function(){
    $(this).children('span').addClass('input-checked');
    $(this).parent('.toggle').siblings('.toggle').children('label').children('span').removeClass('input-checked');
});

CSS

body {
    font-family:sans-serif;
}

.toggle {
    margin:4px;
    background-color:#EFEFEF;
    border-radius:4px;
    border:1px solid #D0D0D0;
    overflow:auto;
    float:left;
}

.toggle label {
    float:left;
    width:2.0em;
}

.toggle label span {
    text-align:center;
    padding:3px 0px;
    display:block;
    cursor: pointer;
}

.toggle label input {
    position:absolute;
    top:-20px;
}

.toggle .input-checked /*, .bounds input:checked + span works for firefox and ie9 but breaks js for ie8(ONLY) */ {
    background-color:#404040;
    color:#F7F7F7;
}

Utilise un minimum de JS (jQuery, deux lignes).

Answer 4

En général, je masque les vrais boutons radio à l'aide de CSS (ou je les transforme en entrées cachées individuelles), je mets l'imagerie que je veux (vous pouvez utiliser une liste non ordonnée et appliquer vos styles à l'élément li), puis j'utilise les événements de clic pour faire basculer les entrées. Cette approche permet également de maintenir l'accessibilité pour les utilisateurs qui ne disposent pas d'un navigateur Web normal - il suffit de masquer l'élément ul par défaut et d'afficher les boutons radio.

Answer 5

HTML :

<div>
    <label> <input type="radio" name="toggle"> On </label>
    <label> Off <input type="radio" name="toggle"> </label>
</div>

CSS:

div { overflow:auto; border:1px solid #ccc; width:100px; }
label { float:left; padding:3px 0; width:50px; text-align:center; }
input { vertical-align:-2px; }

Démonstration en direct : http://jsfiddle.net/scymE/1/