如何修改radio checkbox样式
<!DOCTYPE html>
<html>
<head>
<title>标题</title>
<style>
/* 修改radio-----start */
/* appearance隐藏原生 */
.radio_type {
width: 20px;
height: 20px;
appearance: none;
position: relative;
}
.radio_type:before {
content: '';
width: 20px;
height: 20px;
border: 1px solid #7d7d7d;
display: inline-block;
border-radius: 50%;
vertical-align: middle;
}
.radio_type:checked:before {
content: '';
width: 20px;
height: 20px;
border: 1px solid rgb(117, 94, 143);
background: rgb(117, 94, 143);
display: inline-block;
border-radius: 50%;
vertical-align: middle;
}
/* 选中后打勾 */
.radio_type:checked:after {
content: '';
width: 10px;
height: 5px;
border: 2px solid white;
border-top: transparent;
border-right: transparent;
text-align: center;
display: inline-block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
vertical-align: middle;
transform: rotate(-45deg);
}
/* 修改radio-----end */
/* 修改checkbox-----start */
input[type="checkbox"] {
display: none;
}
.checkbtn {
display: inline-block;
width: 20px;
height: 20px;
border: 1px solid #dcdfe6;
border-radius: 3px;
position: relative;
}
input[type="checkbox"]:checked+span {
background-color: rgb(117, 94, 144);
border-color: rgb(117, 94, 144);
}
.checkbtn::after {
content: '';
width: 10px;
height: 5px;
border: 2px solid white;
border-top: transparent;
border-right: transparent;
text-align: center;
display: inline-block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
vertical-align: middle;
transform: rotate(-45deg);
}
.checkboxLabel {
font-size: 14px;
font-weight: normal;
vertical-align: top;
}
/* 修改checkbox-----end */
</style>
</head>
<body>
<input class="radio_type" type="radio" name="type" id="radio1" checked="checked" />
<label for="radio1">radio1</label>
<input class="radio_type" type="radio" name="type" id="radio2" />
<label for="radio2">radio2</label>
<div style="height: 34px; padding-top: 7px; ">
<label for="visibleLight">
<input type="checkbox" name="ImageOutput" value="visibleLight" id="visibleLight" checked>
<span class="checkbtn"></span>
<span class="checkboxLabel">可见光</span>
</label>
<label for="sticksPeople">
<input type="checkbox" name="ImageOutput" value="sticksPeople" id="sticksPeople">
<span class="checkbtn"></span>
<span class="checkboxLabel">火柴人</span>
</label>
</div>
</body>
</html>
