{justCSS}

Just plain CSS

est. 2015

The infamous radio button hack

Lots has been written already about the “radio button hack” and I’m here to tell you that it isn’t – it’s not a hack, because you’re not exploiting any loopholes or functionality that may or may not be fixed down the line – the radio button trick works and should keep on working for the foreseeable future; that and the checkbox trick. What’s it about then?

The basic premise is that you can use radio buttons to select one element out of a group and use the state of the selected element to target/style another – you can also use a checkbox if you’re only interested in changing the state of one element. The technique relies on 3 things:

  1. The active state of a radio button or checkbox
  2. The label for that element as the trigger
  3. Using sibling selectors to target a corresponding container

WAT!!!???

The active state of a radio button or checkbox …

A set of radio buttons is associated via the name attribute and you can only select one in a group – e.g.:

<div class="demo-container">
    <input type="radio" value="01" name="set-1" id="one-one" /><label for="one-one">Set 1 - Radio 1</label>
    <input type="radio" value="02" name="set-1" id="one-two" /><label for="one-two">Set 1 - Radio 2</label>
    <input type="radio" value="03" name="set-1" id="one-three" /><label for="one-three">Set 1 - Radio 3</label>
</div>
<div class="demo-container">
    <input type="radio" value="01" name="set-2" id="two-one" /><label for="two-one">Set 2 - Radio 1</label>
    <input type="radio" value="02" name="set-2" id="two-two" /><label for="two-two">Set 2 - Radio 2</label>
    <input type="radio" value="03" name="set-2" id="two-three" /><label for="two-three">Set 2 - Radio 3</label>
</div>

… will give you the below. Notice how only one radio button can be active at a time in either of the groups (also notice how the default state for all radio buttons is OFF/not checked) – this applies to all radio buttons in a document that are in the same group, irrespective of where in the document they are placed …

See the Pen eNmgER by Jacques Mostert (@jayx) on CodePen.14523

… which is useful for forms and stuff (think multiple choice questions), but we can also use that to change the properties of elements elsewhere in our document.

The label for that element as the trigger …

Notice how I specify which <label> belongs to which radio button by means of the for and id attributes? Radio buttons are ugly and we cannot style them, but their labels are useful for just that and can carry ::before and ::after pseudo elements.

See the Pen doPNJQ by Jacques Mostert (@jayx) on CodePen.14523

Using sibling selectors to target a corresponding container …

So we’ve already used one sibling selector (adjacent sibling using + ) to target the labels following an active radio button, but this is not entirely useful as we might want to target an element later in the same document using the same trick … enters the general sibling selector ( ~ ) …

/* Using the adjacent sibling selector */
div + div{ ... }

<div>First div</div>
<div>This div is the target of the above selector</div>
<p>Some other content</p>
<div>This div will not be selected</div>

/* Using the general sibling selector */
div ~ div{ ... }

<div>First div</div>
<div>This div is the target of the above selector</div>
<p>Some other content</p>
<div>This div is also the target of the above selector</div>

The main thing to remember is that, for an element to be adjacent to another, they have to be direct descendants of the same parent container …

div ~ div{ ... }

<div>First div</div>
<div>This div is the target of the above selector</div>
<p>Some other content</p>
<div>
    This div is also the target of the above selector
    <div>This div is no longer adjacent to the first div(s)</div>
</div>

… and we can use this trick like this …

See the Pen VLYPER by Jacques Mostert (@jayx) on CodePen.14523

A simple enough trick – I’ll be using this lots in future posts … stay tuned – also: comments are open, play nice.


Notes on use:
These sibling selector have been around for a while now, so browser support is generally very good … i.e. don’t be shy to use them.

Leave a Reply

Your email address will not be published. Required fields are marked *