今天小编跟大家讲解下有关使用<label>标签修改input[type=checkbox]的样式 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关使用<label>标签修改input[type=checkbox]的样式 的相关资料,希望小伙伴们看了有所帮助。
因为的特性有两点 :①不呈现任何效果②用户点击该标签, 浏览器能自动将焦点转移到相关的表单控件上.
Male
所以正适合用于修改input的样式 进入正文, 修改input[type="checkbox"]的样式/*选定前*/
#male + label::before{ /*设置label标签的伪元素*/
content: "\a0"; /*不换行空格*/
display: inline-block;
width: 20px;
height: 20px;
border: 1px solid #999;
}
/*选定时*/
#male:checked + label::before{
content: "\2714"; /*√*/
text-align: center;
background-color: rgb(68, 171, 247);
}
/*取消默认框*/
#male{
display: none;
}效果如下:
设置后的样式:选定前
选定后
本文只是简单描述修改input[type="checkbox"]样式的原理
来源:爱蒂网
郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时候联系我们修改或删除,多谢。