<!doctype html>
<html> <head> <meta charset="utf-8"> <title>chec</title> <style> #container { margin: 20px auto; } #container span { position: relative; } #container .input_check { position: absolute; visibility: hidden; } #container .input_check+label { display: inline-block; 16px; height: 16px; border: 1px solid #fd8845; } #container .input_check:checked+label:after { content: ""; position: absolute; left: 2px; bottom: 12px; 9px; height: 4px; border: 2px solid #fd8845; border-top-color: transparent; border-right-color: transparent; -ms-transform: rotate(-60deg); -moz-transform: rotate(-60deg); -webkit-transform: rotate(-60deg); transform: rotate(-45deg); } </style> </head> <body> <h3>利用css的：after跟transform属性代替checkbox效果</h3> <div id="container"> <span><input type="checkbox"class="input_check" id="check3"><label for="check3"></label></span> <span><input type="checkbox"class="input_check" id="check4"><label for="check4"></label></span> </div> </body></html>转http://www.tuicool.com/articles/uMzeQf