http://www.w3cfuns.com/blog-5422889-5398674.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> .p_check{position:relative;display:inline-block;width:18px;height:18px;border:2px solid #FF6980;vertical-align:middle;} .p_check input{opacity:0;} .p_check input+span{display:none;position:absolute;left:0;top:0;width:100%;height:100%;background-color:#FF6980;} .p_check input+span:after{display:inline-block;content:"";margin:4px 0 0 7px;width:4px;height:8px;border:2px solid #FFF;border-left-width:0;border-top-width:0;vertical-align:top; transform:rotate(45deg); -moz-transform:rotate(45deg); -webkit-transform:rotate(45deg); -o-transform:rotate(45deg); -ms-transform:rotate(45deg); } .p_check input:checked+span{display:inline-block;} </style> </head> <body> <p> <label class="p_check"><input type="checkbox" checked="checked" value="" /><span></span></label> <a>哈哈哈哈哈哈</a> </p> <p> <label class="p_check"><input type="checkbox" value="" /><span></span></label> <a>呵呵呵呵呵呵</a> </p> </body> </html>