61,115
社区成员
发帖
与我相关
我的任务
分享
<style type="text/css">
.rexButton,.rexInput,.rexCheck,.rexTurn,.rexSwitch,.rexSelect,.rexLable,.rexTip,.rexField{ display:inline-block; padding:.5em .8em; border:1px solid #ccc; background-color:#f0f0f0; border-radius:6px; overflow:hidden; vertical-align:middle; line-height:normal; position:relative; white-space:nowrap;}
/* 块状单选复选框 */
.rexTurn{ border-color:transparent; background-color:transparent; overflow:visible;}
.rexTurn input[type="checkbox"],.rexTurn input[type="radio"]{ position:absolute; z-index:5; top:0; left:0; width:100%; height:100%; opacity:0; cursor: pointer;}
.rexTurn input+label:before{ content:""; position:absolute; width:100%; height:100%; z-index:-1; background-color:#f2f2f2; box-shadow:0 0 0 1px #ccc; top:0; left:0; border-radius:6px;}
.rexTurn input:checked+label:before{ background-color:#fff; box-shadow:0 0 0 1px #666;}
.rexTurn input:checked+label:after{ content:""; position:absolute; z-index:5; width:0; height:0; line-height:0; text-align:right; border:.5em solid #666; border-top-color:transparent; border-left-color:transparent; border-bottom-right-radius:4px; bottom:0; right:0;}
.rexTurn input[type="checkbox"]:checked+label:after{ font-size:.85em; content:"√"; color:#fff;}
</style>
<span class="rexTurn">
<input type="checkbox" value="1"/>
<label>选项1</label>
</span>