A control for options

I say control, but it’s basically a group of radio buttons or checkboxes grouped in a fieldset with a legend – not Tom Cruise in Ridley Scott’s Legend. The real magic happens with CSS. This CSS magic only works in modern browsers. Oldskool browsers like IE8 and below are immune to quality, so instead, you get a bog basic group of inputs. Progressive enhancement in action.

The following is a picture of what we get:

Option group control screenshot

Now this won’t be anything some people haven’t seen before, but much more than this, I’ve done it my way. My way means targeting all browsers except IE8 and below, which I said before (déjà vu) with a selector hack. This being the following:

:root .selector-name {}

Check out browserhacks.com for an explanation on what can be a necessary evil. Though evil is a strong word. It’s not like I’m skinning Dalmatian puppies for a coat.

Anyway, this means you will be left with whatever your basic CSS styles for fieldset, radio buttons and checkboxes are. Basic but functional like the following example:

IE8 option group control screenshot

Scaling and a finger lickin’ good SVG

The sprite for the radio buttons and checkboxes is an SVG. This means there is a scalable image that looks sharp in most resolutions. I say most resolutions because, depending on zoom level, I find them slightly blurry on occasion. I was going to use a png fallback with the help of modernizr, but SVG support is pretty good now and IE8 and below are the main bad boys here. So as I’m not serving IE8 the good stuff it seemed overkill. Basically, the option’s there if it’s needed.

Rem values are also getting in on the action with a px fallback for browsers that don’t support the value. This means the control scales nicely as a whole and will also scale depending on the base font size on your HTML element. You can try it for yourself by editing the demo CSS, or simply zooming in and out of the demo page.

Shut up and tell me how to use it

Grab the CSS or Sass and sprite from github, plug that into your project however you fancy and then create the HTML for a group of radio buttons or checkboxes. This will look a lot like the following:

<fieldset class=option-group-control>
<legend>I am a legend because</legend>
<input type=radio name=legend-because id=legend-because-element />
<label for=legend-because-element>I'm the legend element</label>
<br>
<input type=radio name=legend-because id=legend-because-tom-cruise />
<label for=legend-because-tom-cruise>I'm Tom Cruise in Legend</label>
<br>
<input type=radio name=legend-because id=legend-because-tim-curry />
<label for=legend-because-tim-curry>Tim Curry is the greatest character actor there ever was</label>
</fieldset>

Because I like BEM (and you should too), you can add a modifier class of option-group-control--vertical-list onto the fieldset. This, surprisingly, will throw your input labels into the horizontal list state.

Browser support

Did I mention IE8 yet?

I’ve tested in:

  • Internet Explorer 7 to 11
  • Chrome
  • Firefox
  • Safari
  • Opera – slight sprite alignment issue
  • iOS – Safari, Chrome and Opera Coast (It’s all the same anyway)
  • Android – Android Browser, Chrome and Firefox

And they all behave nicely, so no Dalmatian skinning.

Demo and source

It’s all on GitHub.