Custom Radio and Check Pure CSSはPure CSSで実装されたカスタムラジオボタンとチェックボックス。

<style>
 body { color: #5b5b5b; font-family: 'Source Sans Pro', sans-serif; font-size: 16px; line-height: 1.4; padding:40px; }
.custom-radio {  cursor: pointer; display: block; margin: 0 0 21px; padding: 0 0 0 26px; position: relative; }
.custom-radio input[type="radio"] { display: none; }
.custom-radio span.radio { background: #fff; border: solid 2px #b5b5b5; border-radius: 50%; cursor: pointer; display: block; height: 12px; left: 0; margin: 0px; left: 0; position: absolute; top: 3px; width: 12px; }
.custom-radio span.radio:after { border-radius: 50%; content: ""; height: 12px; left:0; position: absolute; top:0; bottom:0; right:0; margin:auto; transform: scale(2); -webkit-transform: scale(2); opacity: 0; transition: all 0.3s ease-in; -webkit-transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in; width: 12px; }
.custom-radio input[type='radio']:checked + span.radio:after { border-color: #85878a; background: #85878a; background-size: 18px auto; transform: scale(1); -webkit-transform: scale(1); opacity: 1; }
.custom-radio input[type='radio']:disabled + span.radio, .custom-checkbox input[type='checkbox']:disabled + span.checkbox { cursor: not-allowed; opacity: 0.5 }
.custom-radio input[type='radio']:disabled + span.radio:after { transform: scale(1); -webkit-transform: scale(1); opacity: 0.5; }
.custom-checkbox { cursor: pointer; display:block; font-size: 16px; line-height: 26px; margin: 0 0 20px; padding: 0 0 0 40px; position: relative; }
.custom-checkbox input[type="checkbox"] { display: none; }
.custom-checkbox span.checkbox { background-color: #fff; border: solid 2px #cccccc; border-radius:50%; cursor: pointer; display: block; height: 26px; margin: 0px; position: absolute; left: 0; top: 0px; width: 26px; }
.custom-checkbox input[type='checkbox']:checked + span.checkbox { background: #f3a321; border-color: #f3a321; text-align:center; }
.custom-checkbox input[type='checkbox']:checked + span.checkbox:before { content:"\f00c"; color:#fff; font: normal normal normal 20px/1 FontAwesome;}
</style>

<label class="custom-radio">
  <input type="radio" name="radio" value="radio1" checked="checked">
  <span class="radio"></span>
Radio 1
</label>
<label class="custom-radio"><input type="radio" name="radio" value="Radio2">
  <span class="radio"></span>
  Radio 2
</label>


<label class="custom-checkbox">
  <input type="checkbox" value="checkbox1" checked="checked">
  <span class="checkbox"></span>
Checkbox 1
</label>
<label class="custom-checkbox"><input type="checkbox" value="checkbox2">
  <span class="checkbox"></span>
  Checkbox 2
</label>

• Tag
• CSS
• Form Elements