CSS3 customize checkbox & checkbox image & css checkbox All In One

CSS3 customize checkbox & checkbox image & css checkbox All In One

custom css checkbox

https://webdesign.tutsplus.com/articles/quick-tip-easy-css3-checkboxes-and-radio-buttons--webdesign-8953

https://css-tricks.com/the-checkbox-hack/

https://www.thecssninja.com/css/custom-inputs-using-css

http://dabblet.com/gist/1506530

https://codepen.io/tutsplus/pen/bgqYJz

https://codepen.io/xgqfrms/pen/jjqzLP

CSS3 customize checkbox

checkbox image

https://codepen.io/xgqfrms/pen/RzaMZe

<input type="checkbox" id="toggle">
<label for="toggle"></label>
<span>I'm controlled by css `input[type=checkbox]:checked` toggle. No JavaScript!</span>

/* Checkbox Hack */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

input[type=checkbox] {
    position: absolute;
    top: -9999px;
    left: -9999px;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
}

label {
    box-sizing: border-box;
    cursor: pointer;
    width: 18px;
    height: 18px;
    background: url(https://cdn.xgqfrms.xyz/icons/app-guide/check-circle.svg) no-repeat;
    display: inline-block;
}

input[type=checkbox]:checked ~ label{
    cursor: pointer;
    width: 18px;
    height: 18px;
    background: url(https://cdn.xgqfrms.xyz/icons/app-guide/checked-circle.svg) no-repeat;
    display: inline-block;
}

span{
    display: inline-block;
}

https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/check_radio_sheet.png

refs

---

---

©xgqfrms 2012-2020

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---