CSS3 Checkbox
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS3 Checkbox相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> .checkbox-value {position:relative;height:30px;line-height:30px;padding-left:30px;overflow:hidden;} .checkbox-value:before { transition:all 0.5s ease-in; content:"";width:20px;height:20px;position:absolute;border:2px solid rgb(0,0,0);border-radius:4px;left:0;top:5px;background:#fff;overflow:hidden;cursor:pointer; } .checkbox-value:after { border:none; transition:all 0.2s ease-in; } .checkboxcon {position:relative;height:30px;overflow:hidden;box-sizing:border-box;display:table;vertical-align:middle;} .checkbox {display:inline-block;width:0;height:0;opacity:0;*width:20px;*height:20px;position:absolute;top:5px;} .checkboxcon input[type=checkbox]:checked+ .checkbox-value:before { transition:all 0.5s ease-in; content:"";width:20px;height:20px;position:absolute;border:2px solid rgba(0,0,0,0.5);border-radius:4px;left:0;top:5px;background:#000;overflow:hidden;cursor:pointer; } .checkboxcon input[type=checkbox]:checked+ .checkbox-value:after { cursor:pointer; margin-top:5px; margin-left:8px; content:""; width:4px;height:9px;border-right:1px solid #fff;border-bottom:1px solid #FFF; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); position:absolute; left:0; top:5px; transition:all 0.2s ease-out; } </style> <script type="text/javascript"></script> </head> <body> <label class="checkboxcon"> <input class="checkbox" type="checkbox" /> <div class="checkbox-value">请选择</div> </label> </body> </html>
以上是关于CSS3 Checkbox的主要内容，如果未能解决你的问题，请参考以下文章