How to make a radio button look like a toggle button


Tags: html,css,radio-button,radiobuttonlist,togglebutton

Problem :

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.



Solution :

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.


    CSS Howto..

    How to test for css properties like modernizr.js

    How to make an text float next to an image in HTML/CSS?

    How to change floating div's width to fill all the space they occupy?

    How to control multiple images for a single background definition

    How do I apply CSS styles to Raphael.js objects using jQuery?

    How to change CSS of ng-view when triggering CSS in ng-include

    How to make a background text appear under youtube video?

    Dropdown list showing vertically in Internet explorer

    How do you make these div elements display correctly?

    How to force elements to stay in the same row

    How can I adjust the margins of quote symbols added with CSS

    how to add a custom font to rails app

    How do I isolate floated content?

    How can I set all columns to be the same height? [duplicate]

    How can I get my hyperlink in HTML result in same page or window with or without using iframe tag or JavaScript?

    How do I put an image on top of an image without using absolute positioning?

    How can I let div inside bootstrap colum scrollable

    how can i get these buttons side by side in the top right corner?

    How to stop css animation in current position on hover?

    How to force inline-block wrap to new line using CSS or jQuery?

    CSS How to make div 100% despite 80% div

    How to set the background-image of this text to an svg?

    CSS: How do I stop hover effects from pushing my text?

    how do you add footer? like all right's reserved for a CSS design?

    How to get messages column up on the right?

    how to edit a css selector in order to shorten the amount of characters used in file

    How to add more bars to this Animated JQuery, CSS and HTML Bar Graph

    How to set background color with opacity by css?

    How can I create this button in CSS3?

    How to change the CSS of page dynamically based on value?