Pure CSS custom radio button (whole width) [closed]

Answer 1

I think you can style it the same way as the buttons,so I think this should do the trick

 .checkbox{
    //other stuff
    background-color: #ffffff !important;

}

It's important to use !important beacuse that way you override the bootstraps styling

Answer 2

(I don't use bootstrap)

HTML

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

CSS

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

Link JSFiddle: https://jsfiddle.net/edbmwz0c/

Hope can help you