Consta Gorgan Consta Gorgan - 11 months ago 59
CSS Question

Pure CSS custom radio button (whole width)

I wish to style a radio button like this using CSS only (no background image):

Radio button whole width

Left: checked / right: unchecked

I know how to replace the radio dot or the tick from the checkbox - there are plenty of tutorials on the internet regarding that - but I couldn't find a way to make the rectangle sit behind the label text like this (rectangle to be 100% of the input's size & leave no extra blank space around it).

Compatibility with older browsers (IE8) should be taken into account.

This is my html (I'm using bootstrap):

<div class="col-xs-6 col-sm-6">
<input type="radio" id="gender_woman" name="gender" value="madame" checked>
<label for="connexion_madame">MADAME</label>
<div class="col-xs-6 col-sm-6">
<input type="radio" id="gender_man" name="gender" value="monsieur">
<label for="connexion_monsieur">MONSIEUR</label>

Answer Source

(I don't use bootstrap)


<label class="radio">
  <input type="radio" name="gender" value="MADAME">
<label class="radio">
  <input type="radio" name="gender" value="MONSIEUR">

  cursor: pointer;
} input {
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
  pointer-events: none;
} span {
  padding: 7px 14px;
  border: 2px solid #EEE;
  display: inline-block;
  color: #009BA2;
  border-radius: 3px;
  text-transform: uppercase;
} input:checked + span {
  border-color: #009BA2;

Link JSFiddle:

Hope can help you