CODEWITHSUNDEEP
jqueryhtmlcssradio-buttontogglebutton
user1901663
user1901663

Reputation: 19

How to make a radio buttons look like a toggle buttons

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.

Upvotes: 0

Views: 4446

Answers (3)

Talha Akbar
Talha Akbar

Reputation: 10040

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;
}​

Upvotes: 3

mpm
mpm

Reputation: 20155

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/

Upvotes: 0

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114417

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.

Upvotes: 0

Related Questions