HTML lt input gt 标签,科技常识：使用<label>标签修改input[type=checkbox]的样式...

今天小编跟大家讲解下有关使用<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"]样式的原理

来源：爱蒂网

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时候联系我们修改或删除，多谢。