- 2025-03-17
- 39
html复选框checkbox样式美化
更新：2025-03-13 13:34:38
来源：
整理：藏葵网
点击：次
思路：使用label结合checkbox，背景图片进行美化。
原理：
1. for 属性规定 label 与哪个表单元素绑定，显式绑定和隐式绑定,均可实现checkbox的选用与取消效果，具体见：
编码实现：
这里我们通过隐藏默认的checkbox,添加一个行内元素span并控制span在checkbox不同状态下的样式即可。
1.html:
<label class="my_protocol"> <input class="input_agreement_protocol" type="checkbox" /> <span></span> </label>
2. css:
/*隐藏掉我们模型的checkbox*/
.my_protocol .input_agreement_protocol {
appearance: none;
-webkit-appearance: none;
outline: none;
display: none;
}
/*未选中时*/
.my_protocol .input_agreement_protocol+span {
width: 16px;
height: 16px;
background-color: red;
display: inline-block;
background: url(../../Images/TalentsRegister/icon_checkbox.png) no-repeat;
background-position-x: 0px;
background-position-y: -25px;
position: relative;
top: 3px;
}
/*选中checkbox时,修改背景图片的位置*/
.my_protocol .input_agreement_protocol:checked+span {
background-position: 0 0px
} 猜你喜欢
- 2025-03-17
- 39
- 2025-03-17
- 39
- 2025-03-16
- 0
- 2025-03-13
- 39
- 2025-03-17
- 9
- 2025-03-17
- 39
- 2025-03-17
- 39
- 2025-03-17
- 39
热门下载
- 2025-03-14
- 3
- 2025-03-13
- 39
- 2025-03-17
- 39
- 2025-03-17
- 39
- 2025-03-17
- 39