checkbox样式修改

最新推荐文章于 2024-05-07 09:22:09 发布

Fish北冥

最新推荐文章于 2024-05-07 09:22:09 发布

阅读量425

点赞数 10

文章标签： css3 html css

本文链接：https://blog.csdn.net/qq_42400124/article/details/135409208

版权

文章详细描述了一个使用HTML和CSS编写的可交互的复选框，用户在点击前需要同意服务条款和隐私政策。展示了如何通过CSS样式控制其显示和交互效果。

摘要由CSDN通过智能技术生成

效果展示

checkbox样式修改

html代码块

<div class="btnwrap">
	<label for="check01" class="check">
		<input type="checkbox" name="chekval" value="1" id="check01"/>
		<i><span></span></i>
		我已阅读并同意<a href="javascript:;" class="tkshow">服务条款</a> 和 <a href="javascript:;" class="zcshow">隐私政策</a>
	</label>
</div>

css样式

/* check */
.btnwrap label.check{display: flex;display: -webkit-flex;align-items: center;-webkit-align-items: center;}
.btnwrap label.check i{width: 14px;height: 14px;background: rgba(0,161,155,0);border: 1px solid #00A19B;border-radius: 4px;display: block;position: relative;margin-right:5px;display: flex;display: -webkit-flex;align-items: center;-webkti-align-items: center;justify-content: center;-webkit-justify-content: center;cursor: pointer;}
.btnwrap label.check i span{width: 6px;height: 6px;border-radius: 2px;background-color: #00A19B;display: block;opacity: 0;}
.btnwrap label.check input{width: 14px;height: 14px;position: absolute;opacity: 0;}
.btnwrap label.check a{color: #00A19B;margin: 0 4px;}
.btnwrap label.check{font-size: 16px;color: #666666;}
.btnwrap label.check input[type='checkbox']:checked+i span{opacity: 1;}
.btnwrap label.check a:hover{text-decoration: underline;}