Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make a radio button look like a toggle button

I want a group of radio buttons to look like a group of toggle buttons (but still function like radio buttons). It's not necessary that they look exactly like toggle buttons.

How can I do this only with CSS and HTML?

EDIT: I will be satisfied making the little circle disappear and changing the style when the button is checked/unchecked.

like image 593
Pomber Avatar asked Apr 02 '11 14:04

Pomber


People also ask

How do I toggle radio button in CSS?

The CSS (SCSS) is fully from @mallendeo (as established on the JS credits), what I did was simply change the type of the input to RADIO, and gave the same name to all the radio switches.... and VOILA!! They deactivate automatically one to the other!!

Can radio buttons be styled?

With some simple and modern CSS, we can now style radio button input elements even easier. Below are three different options, each having its pros and cons. You can try out the different options in the CodePen below.


1 Answers

Depending on which browsers you aim to support, you could use the :checked pseudo-class selector in addition to hiding the radio buttons.

Using this 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> 

You could use something like the following CSS:

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

For instance, (to keep the custom CSS brief) if you were using Bootstrap, you might add class="btn" to your <label> elements and style them appropriately to create a toggle that looks like:

Bootstrap-aided radio toggle

...which just requires the following additional CSS:

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

I've included this as well as the extra fallback styles in a radio button toggle jsFiddle demo. Note that :checked is only supported in IE 9, so this approach is limited to newer browsers.

However, if you need to support IE 8 and are willing to fall back on JavaScript*, you can hack in pseudo-support for :checked without too much difficulty (although you can just as easily set classes directly on the label at that point).

Using some quick and dirty jQuery code as an example of the workaround:

$('.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'); 

You can then make a few changes to the CSS to complete things:

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 */ } 

*If you're using Modernizr, you can use the :selector test to help determine if you need the fallback. I called my test "checkedselector" in the example code, and the jQuery event handler is subsequently only set up when the test fails.

like image 108
Tim Stone Avatar answered Sep 22 '22 14:09

Tim Stone