1、伪类元素
直接隐藏原生的input框,使用::after来设置显示的内容
input[type='checkbox'] {
cursor: pointer;
position: relative;
width: 13px;
height: 13px;
font-size: 13px;
margin-right: 5px;
visibility: hidden;
}
input[type='checkbox']::after {
position: absolute;
top: 2px;
color: #fff;
border: 1px solid #4db7ff;
width: 13px;
height: 13px;
display: inline-block;
visibility: visible;
padding-left: 0px;
text-align: center;
content: ' ';
box-sizing: border-box;
}
input[type='checkbox']:checked::after {
color: #4db7ff;
border: 1px solid #4db7ff;
content: '\2713';
font-size: 12px;
}
特殊字符集合:https://www.cnblogs.com/wujindong/p/5630656.html
示例效果:
2、背景图片
:after/:before中是可以使用背景图片的
input[type='checkbox'] {
cursor: pointer;
position: relative;
width: 13px;
height: 13px;
font-size: 13px;
margin-right: 5px;
visibility: hidden;
}
input[type='checkbox']::after {
position: absolute;
top: 2px;
visibility: visible;
padding-left: 0px;
text-align: center;
content: '';
display: inline-block;
width: 13px;
height: 13px;
background:url('图片路径');
background-size:cover;
}
input[type='checkbox']:checked::after {
content: '';
display: inline-block;
width: 13px;
height: 13px;
background:url('图片路径');
background-size:cover;
}
效果示例: