CSS only Custom Radio Buttons

CSS-only-Custom-Radio-Buttons.markdown

CSS only Custom Radio Buttons

View on CodePen

Forked from CSS only Custom Radio Buttons.

index.html

<div>
  <input type="radio" id="radio01" name="radio" />
  <label for="radio01"><span></span>Radio Button 1</label>
</div>

<div>
 <input type="radio" id="radio02" name="radio" />
 <label for="radio02"><span></span>Radio Button 2</label>
</div>

style.scss

@import "compass/css3";
$text: black;
$shadow: #cccccc;
$outline: #ffffff;
$selected: #CC3300;
$unselected: #cccccc;

div {
  margin: 0 0 0.75em 0;
}

input[type="radio"] {
    display: none;
}
input[type="radio"] + label {
    color: $text;
    font-family: Arial, sans-serif;
    font-size: 16px;
}
input[type="radio"] + label span {
    box-shadow: 0 0 0 2px $shadow;
    display: inline-block;
    width: 24px;
    height: 24px;
    margin: -1px 7px 0 0;
    vertical-align: middle;
    cursor: pointer;
    border-radius: 50%;
}

input[type="radio"] + label span {
  border: 8px solid $outline;
  background-color: $unselected;
}

input[type="radio"]:checked + label span{
  background-color: $selected;
}