Custom Radio

by Florian Bar

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div class="row">

  <div class="col-xs-6">
    <input 
      id="custom-radio1" class="custom-radio" 
      type="radio" name="custom-radio" value="0" />
    <label for="custom-radio1">
      Test
    </label> 
  </div>
  
  <div class="col-xs-6">
    <input 
      id="custom-radio2" class="custom-radio" 
      type="radio" name="custom-radio" value="0" />
    <label for="custom-radio2">
      Test
    </label> 
  </div>
  
</div>

CSS

.custom-radio {
  position: absolute;
  opacity: 0;
}

.custom-radio + label {
  position: relative;
  display: block;
  cursor: pointer;
  margin-bottom: 10px;
  padding: 40px 4px 4px 4px;
  background-color: #fff;
  border: 1px solid #999;
  border-radius: 12px;
  text-align: center;
}

.custom-radio:checked + label {
  background: #eee;
  border-color: #000;
}

.custom-radio + label::before {
  content: "";
  position: absolute;
  display: block;
  top: 8px;
  right: 8px;
  width: 14px;
  height: 14px;
  border: 1px solid #666;
  border-radius: 100%;
}

.custom-radio:checked + label::before {
  background-color: green;
}