<!DOCTYPE html> <html> <head> <title></title> </head> <style type="text/css"> .checkbox { display: none; } .label:before { display: block; content: ""; margin: 0 .5em 0 0; float: left; width: 20px; height: 20px; background-color: green; border: 1px solid ; -webkit-border-radius: 50%; /* Safari 和 Chrome */ } .checkbox:checked + .label:before { color: white; content: "✓"; } </style> <body> <input id="sample-checkbox" class="checkbox" type="checkbox"> <label class="label" for="sample-checkbox"> Click me </label> </body> </html>
原文地址：
http://modernweb.com/2014/07/30/5-things-wont-believe-built-css/