i-input-css
Version:
Simple Radio and Checkbox (CSS only)
2 lines • 2.03 kB
CSS
/* i-input.css#v1.0.2 */
.i-check,.i-radio{padding:5px 0;margin-bottom:10px}.i-check>label,.i-radio>label{cursor:pointer}.i-check>label>input:disabled+span,.i-radio>label>input:disabled+span{cursor:default;opacity:1}.i-check>label>input:disabled+span:after,.i-check>label>input:disabled+span:before,.i-radio>label>input:disabled+span:after,.i-radio>label>input:disabled+span:before{opacity:.7}.i-radio>label>input[type=radio]:disabled+span:before{background:#e0ecec}.i-check>label>input[type=checkbox],.i-radio>label>input[type=radio]{vertical-align:top;width:17px;height:17px;margin:0 3px 0 0}.i-check>label>input[type=checkbox]:not(checked),.i-radio>label>input[type=radio]:not(checked){position:absolute;opacity:0}.i-check>label>input[type=checkbox]:not(checked)+span{position:relative;padding:0 0 0 60px}.i-check>label>input[type=checkbox]:not(checked)+span:before{content:'';position:absolute;top:-4px;left:0;width:50px;height:26px;border-radius:13px;background:#cdd;box-shadow:inset 0 2px 3px rgba(0,0,0,.2)}.i-check>label>input[type=checkbox]:not(checked)+span:after{content:'';position:absolute;top:-2px;left:2px;width:22px;height:22px;border-radius:10px;background:#FFF;box-shadow:0 2px 5px rgba(0,0,0,.3);transition:all .2s}.i-check>label>input[type=checkbox]:checked+span:before{background:#0d0}.i-check>label>input[type=checkbox]:checked+span:after{left:26px}.i-radio>label>input[type=radio]:not(checked)+span{position:relative;padding:0 0 0 35px}.i-radio>label>input[type=radio]:not(checked)+span:before{content:'';position:absolute;top:-3px;left:0;width:24px;height:24px;border:1px solid #cdd;border-radius:50%;background:#fff}.i-radio>label>input[type=radio]:not(checked)+span:after{content:'';position:absolute;top:1px;left:4px;width:18px;height:18px;border-radius:50%;background:#0d0;box-shadow:inset 0 1px 1px rgba(0,0,0,.5);opacity:0;transition:all .2s}.i-radio>label>input[type=radio]:focus+span:before{box-shadow:0 0 0 3px rgba(255,255,0,.5)}.i-radio>label>input[type=radio]:checked+span:after{opacity:1}