CSS
【CSS】カスタムラジオボタンとチェックボックスCustom Radio and Check Pure CSS
March 9, 2017

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>