Databases
StackOverflow2013
Postsdbo
POHow to make a radio buttons look like a toggle buttons
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to make a radio buttons look like a toggle buttons
    text
    copied!<p>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) </p> <p>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).</p> <p>I've tried to adapt different solutions to my HTML (like <a href="https://stackoverflow.com/a/9376041">https://stackoverflow.com/a/9376041</a> and <a href="https://stackoverflow.com/q/13135942">CSS change active select for radio</a>), but I don't know javascript and I was unable to make them work.</p> <p>My HTML is:</p> <pre><code>&lt;div id="edit-status" class="form-radios"&gt; &lt;div class="form-item form-type-radio form-item-status"&gt; &lt;input type="radio" id="edit-status-0" name="status" value="0" class="form-radio"/&gt; &lt;label class="option" for="edit-status-0"&gt;Bloqueado&lt;/label&gt; &lt;/div&gt; &lt;div class="form-item form-type-radio form-item-status"&gt; &lt;input type="radio" id="edit-status-1" name="status" value="1" checked="checked" class="form-radio"/&gt; &lt;label class="option" for="edit-status-1"&gt;Activo&lt;/label&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>If somebody could give me the Jquery code I would appreciate it a lot (I know CSS, so that part is not a problem).</p> <p>EDIT: <strong>I need that the Jquery provides a class for the label of the selected radio button</strong> in order to style it differently from the label of the non-selected radio button.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload