How to make (custom) radio buttons work in CSS3

I’ve been trying to make custom radio buttons work. I had been using check boxes but found that I needed to restrict the checked options to one. I’ve been looking at examples/tutorials that I found using Google and thought I understood enough for a simple set of 4 radio buttons but …

They display correctly initially with the first button checked but checking on other buttons just displays the checked PNG: a previously checked button does not revert to unchecked state.

The buttons are arranged sequentially horizontally in their own div.

HTML

<div class='radio'>
  <input id='B12' type='radio' class='radiobutton' checked>
  <label id='lblB12' class='radiobutton-label' for='B12'>IR&nbsp;</label>
  <input id='BBW' type='radio' class='radiobutton' >
  <label id='lblBBW' class='radiobutton-label' for='BBW'>Wide</label>
  <input id='B10' type='radio' class='radiobutton' >
  <label id='lblB10' class='radiobutton-label' for='B10'>B10</label>
  <input id='B8' type='radio' class='radiobutton' >
  <label id='lblB8' class='radiobutton-label' for='B8'>B8&nbsp;</label>
</div>

CSS3

.radiobutton-label {
  display: inline-block;
  cursor: pointer;
  position: relative;
  padding-left: 25px;
  margin-right: 15px;
  font-size: 15px;
}

input[type="radio"] {
  display: none;
  margin: 10px;
}

.radiobutton-label:before {
  content:"";
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-right: 10px;
  position: absolute;
  left: 0;
  bottombottom: 1px;
  background: url(resources/CheckBoxUnchecked.png) left top;
}

input[type=radio]: + label:before {
  background: url(resources/CheckBoxUnchecked.png) left top;
}

input[type=radio]:checked + label:before {
  background: url(resources/CheckBoxOK.png) left top;
}

This is the first web page that I have attempted.


solution

Relevant Spec - 17 Forms / 17.2.1 Control types

Radio buttons are like checkboxes except that when several share the same control name, they are mutually exclusive : when one is switched “on”, all others with the same name are switched “off”.

Therefore if you want the radio elements to be mutually exclusive, just give them all the same name attribute. In this instance, I just used name="checkboxes".

Updated HTML EXAMPLE HERE

<div class='radio'>
  <input id='B12' type='radio' class='radiobutton' name="checkboxes" checked="checked"/>
  <label id='lblB12' class='radiobutton-label' for='B12'>IR&nbsp;</label>
  <input id='BBW' type='radio' class='radiobutton' name="checkboxes"/>
  <label id='lblBBW' class='radiobutton-label' for='BBW'>Wide</label>
  <input id='B10' type='radio' class='radiobutton' name="checkboxes"/>
  <label id='lblB10' class='radiobutton-label' for='B10'>B10</label>
  <input id='B8' type='radio' class='radiobutton' name="checkboxes"/>
  <label id='lblB8' class='radiobutton-label' for='B8'>B8&nbsp;</label>
</div>

Base CSS:

input[type=radio] + label:before {
  background: url('http://www.csscheckbox.com/checkboxes/vlad.png') 2px 4px no-repeat;
}
input[type=radio]:checked + label:before {
  background: url('http://www.csscheckbox.com/checkboxes/vlad.png') 2px -18px no-repeat;
}