How to make a radio buttons look like a toggle buttons

Question

I'm trying to style radio buttons like a toggle buttons. I want to do it cross-browser, so I guess jquery is the only option (CSS3 property :checked is not an option for me)

I know there are a lot of published solutions for this, but I can't use directly any of them because I can't change any of the HTML code (it's created by Drupal).

I've tried to adapt different solutions to my HTML (like https://stackoverflow.com/a/9376041 and CSS change active select for radio), but I don't know javascript and I was unable to make them work.

My HTML is:

<div id="edit-status" class="form-radios">
<div class="form-item form-type-radio form-item-status">
<input type="radio" id="edit-status-0" name="status" value="0" class="form-radio"/>
<label class="option" for="edit-status-0">Bloqueado</label>
</div>
<div class="form-item form-type-radio form-item-status">
<input type="radio" id="edit-status-1" name="status" value="1" checked="checked" class="form-radio"/>
<label class="option" for="edit-status-1">Activo</label>
</div>
</div>

If somebody could give me the Jquery code I would appreciate it a lot (I know CSS, so that part is not a problem).

EDIT: I need that the Jquery provides a class for the label of the selected radio button in order to style it differently from the label of the non-selected radio button.

You can see it in the examples of the links I provided. The direct links to the examples are http://jsfiddle.net/aS69U/ and http://jsfiddle.net/RkvAP/230/ — user1901663, Dec 13 '12 at 17:15
I'm very confused as to what your after here?? I don't understand the sentence "I need that the Jquery provides a class for the label of the selected radio button". Can you provide a better explanation? — Liam, Dec 13 '12 at 17:27
I would recommend not implementing controls like that: users tend to find them confusing (does it slide or do I click it to change states? is that the enabled or disabled state? does it still work with JS turned off?). — cimmanon, Dec 13 '12 at 20:33
Liam, what I need is a jquery code that when you select a radio button, it adds a new css class to it's label. I want that in order to change the css of the selected label (basically it's background property) and distinguish it from the label that wasn't selected. You can easily get the idea in the examples provided by the other users (http://jsfiddle.net/camus/pLfvS/ and http://jsfiddle.net/aS69U/7/) — user1901663, Dec 13 '12 at 23:07
cimmanon, thanks for your suggestion. I would agree with you in most cases, but I think in my particular implementation radio buttons could be even more confusing than "toggle buttons". — user1901663, Dec 13 '12 at 23:09

score 3 · Accepted Answer · edited Mar 06 '15 at 19:53

Is This what you wanted?

http://jsfiddle.net/aS69U/7/

.form-radios {
    display: block;
    float: left;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    font-weight: bold;
    text-transform: uppercase;
    background: #eee;
    border: 1px solid #aaa;
    padding: 2px;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.2);
    margin-left: 20px;
}

.form-radios input[type=radio] {
    display: none;
}

.form-radios label     {
    display: block;
    float: left;
    padding: 3px 6px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    color: #aaa;
    cursor: pointer;
}

.form-radios label:hover {
    text-shadow: 0 0 2px #fff;
    color: #888;
}

.form-radios label.checked {
    background: #8fc800;
    color: #eee;
    text-shadow: 0 -1px 1px rgba(0,0,0,0.5);
    background: -webkit-linear-gradient(top, #8fc800, #438c00);
    background: -moz-linear-gradient(top, #8fc800, #438c00);
    background: -ms-linear-gradient(top, #8fc800, #438c00);
    cursor: default;
}

hey man you forgot to add `$(document).ready(function() { .... code of jquery in fiddle..... });` Then it will work and don't forget to upvote this answer! — Muhammad Talha Akbar, Dec 14 '12 at 07:59
Yes, that was the problem (I'm such a noob...). Now it's working perfectly, thanks a lot! — user1901663, Dec 14 '12 at 09:24
Use this too: /* Bug fix for webkit on Droid */ .form-radios label:nth-child(n) { display: block; } — vr_driver, Oct 03 '13 at 11:18

score 0 · Answer 2 · answered Dec 13 '12 at 17:34

0

Most form controls are rendered by the OS, not the browser. The ability to style radio, checkbox, file inputs and select options is quite limited. There really is no dependable cross-browser method to do what you want without resorting to Javascript-based solutions. CSS alone cannot do what you want.

answered Dec 13 '12 at 17:34

Diodeus - James MacFarlane

112,730
33
157
176

Actually, I've already mentioned in my question that CSS could not give a cross-browser solution (first paragraph), but thanks anyway for taking the time to answer :) – user1901663 Dec 13 '12 at 23:13

score 0 · Answer 3 · answered Dec 13 '12 at 17:42

JS :

$('label.option').click(function(){
    $('.form-item input[type=radio]').attr('checked',null);
    $('label.option').removeClass("checked");
    $(this).prev().attr('checked',"checked");
    $(this).addClass("checked");
})

CSS :

.form-item.form-type-radio.form-item-status{
   display:inline-block;        
}

.form-type-radio input[type=radio]
{
    display: none;
}

 .checked{
  background:#F00;
 }

In a nutshell.

http://jsfiddle.net/camus/pLfvS/

How to make a radio buttons look like a toggle buttons

3 Answers3