实现单选框的效果:
<p class="login-p">
<span>
<input type="checkbox" class="checkbox" checked="checked"/>
<a href="javascript:;">我已阅读并同意《xxx协议》</a>
</span>
</p>
css代码:
.form-box .login-p{
margin: 1rem 0rem 1rem 0rem;
}
.form-box .login-p a{
color: #555;
font-size: 1.4rem;
}
.form-box .checkbox{
-webkit-appearance: none;
appearance: none;
width: 1.3rem;
height: 1.3rem;
margin: 0;
cursor: pointer;
vertical-align: bottom;
background: #E80000;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
position: relative;
top: -0.2rem;
}
input[type=checkbox]:checked::after
css3 写checkbox 标签单选框和实现类似于多选框的样式改写
最新推荐文章于 2024-01-28 20:23:56 发布
本文介绍了如何使用CSS3来改写checkbox单选框的样式,使其看起来更美观,同时也展示了如何模拟实现多选框的效果。通过CSS选择器和伪类,我们可以定制复选框的视觉表现,提升用户界面的体验。
摘要由CSDN通过智能技术生成