自定义复选框checkbox

最新推荐文章于 2024-09-14 13:19:10 发布

weixin_30609287

最新推荐文章于 2024-09-14 13:19:10 发布

阅读量62

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/allenfei/p/5069983.html

本文详细介绍了如何设计一个包含勾选框和用户协议文本的网页元素，确保用户能够明确阅读并同意服务协议。

//html

<div class="checkboxFive">
    <input type="checkbox" value="1" id="checkboxFiveInput" name="" />
    <label for="checkboxFiveInput"></label>
</div>
<div class="checkboxCont">已阅读并同意服务协议!</div>

//css样式

.checkboxFive { width: 18px; position: relative;}
.checkboxFive label { cursor: pointer; position: absolute; width: 18px; height: 18px; top: -1px; left: -1px; background: #0d97d7; border:1px solid #fff; border-radius: 5px;}
.checkboxFive label:after { opacity: 0.1; content: ''; position: absolute; width: 9px; height: 5px; background: transparent; top: 3px; left: 4px; border: 2px solid #fff; border-top: none; border-right: none; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg);}
.checkboxFive label:hover::after { opacity: 0.1;}
.checkboxFive input[type=checkbox]:checked + label:after { opacity: 1;}
.checkboxCont{ line-height: 18px; padding-left: .5rem;}