CSS秘密花园： 自定义复选框

https://www.w3cplus.com/css3/css-secrets/custom-checkboxes.html

head

<style type="text/css">

input[type="checkbox"] { position: absolute; clip: rect(0,0,0,0); } input[type="checkbox"] + label { display: inline-block; padding: .3em .5em; background: #ccc; background-image: linear-gradient(#ddd, #bbb); border: 1px solid rgba(0,0,0,.2); border-radius: .3em; box-shadow: 0 1px white inset; text-align: center; text-shadow: 0 1px 1px white; } input[type="checkbox"]:checked + label, input[type="checkbox"]:active + label { box-shadow: .05em .1em .2em rgba(0,0,0,.6) inset; border-color: rgba(0,0,0,.3); background: #bbb; }
</style>

body

<input type="checkbox" id="awesome" /> <label for="awesome">Awesome!</label>