Pure Css radio input

A simple, clean and minimal Css code to style radio buttons without javascript and images.

Here a preview of Css radio input:

Browser compatibility: Firefox, Explorer 9+, Opera, Safari, Chrome.

Css Radio Input

The HTML markup:

<form>
   <div class="input-option">
      <label for="yes">Yes, you can <em>some text here</em></label>
      <div class="radio">
         <input type="radio" id="yes" value="" name="choice" checked="checked"><span></span>
      </div>
   </div>
   <div class="input-option">
      <label for="no">No, you can't <em>some text here</em></label>
      <div class="radio">
         <input type="radio" id="no" value="" name="choice"><span></span>
      </div>
   </div>
</form>

Copy and paste the CSS code:

.input-option {
    border-right: 1px solid #eee;
    float: left;
    padding: 1em;
    margin: 0 0 1em 0;
    width: 50%;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
.input-option + .input-option {
    border: 0;
}
.input-option label {
    display: block;
    margin: 0 0 0.5em 0;
    padding: 0;
    text-align: center;
    text-transform: none;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
}
.input-option label em {
    display: block;
    margin: 0.25em 0 0;
    padding: 0;
    font-size: 14px;
    font-style: normal;
    font-weight: normal;
    color: #999;
    font-size: 13px
}
.input-option .radio {
    position: relative;
    float: none;
    margin: 0 auto;
    padding: 0;
    width: 20px;
    height: 20px;
    line-height: 20px;
}
.input-option .radio input {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    vertical-align: middle;
    width: 24px;
    height: 24px;
    filter: alpha(opacity=0);
    opacity: 0;
    cursor: pointer;
    outline: none;
    z-index: 1;
}
.input-option .radio input[type="radio"] + span {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    color: #FFF;
    text-align: center;
    border: 3px solid #ddd;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
.input-option .radio input[type="radio"]:checked + span {
    border-color: #36a3d9;
}
.input-option .radio input[type="radio"]:checked + span:before {
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    margin: 4px auto 0;
    background-color: #36a3d9;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}