兼容ie9+
效果如圖:
s.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.qj_radio,
.qj_checkbox {
color: #5a5e66;
font-weight: 500;
line-height: 1;
position: relative;
cursor: pointer;
display: inline-block;
white-space: nowrap;
outline: none;
font-size: 14px;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
margin-right: 8px;
}
.qj_radio::after,
.qj_checkbox::after {
display: block;
height: 0;
content: "";
clear: both;
}
.qj_radio>span,
.qj_radio>input,
.qj_checkbox>span,
.qj_checkbox>span {
float: left;
}
.qj_radio>input,
.qj_checkbox>input {
display: none;
}
.qj_radio>.qj_label,
.qj_checkbox>.qj_label {
padding-left: 5px;
}
.qj_radio>.qj_inner,
.qj_checkbox>.qj_inner {
border: 1px solid #d8dce5;
width: 14px;
height: 14px;
background-color: #fff;
position: relative;
cursor: pointer;
display: inline-block;
box-sizing: border-box;
}
.qj_radio>.qj_inner {
border-radius: 100%;
}
.qj_checkbox>.qj_inner {
border-radius: 2px;
}
.qj_radio>.qj_inner:after {
width: 6px;
height: 6px;
border-radius: 100%;
background: #409eff;
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) scale(0);
transition: transform .15s ease;
}
.qj_radio:hover>.qj_inner,
.qj_radio>input:checked+.qj_inner {
border-color: #409eff;
}
.qj_radio>input:checked+.qj_inner+.qj_label,
.qj_checkbox>input:checked+.qj_inner+.qj_label {
color: #409eff;
}
.qj_radio>input:disabled+.qj_inner+.qj_label,
.qj_checkbox>input:disabled+.qj_inner+.qj_label {
color: #b4bccc;
}
.qj_radio>input:checked+.qj_inner:after {
transform: translate(-50%, -50%) scale(1);
}
.qj_checkbox>.qj_inner:after {
display: block;
box-sizing: border-box;
width: 3px;
height: 7px;
border: 1px solid #fff;
border-left: none;
border-top: none;
content: "";
position: absolute;
left: 50%;
top: 45%;
transform-origin: center center;
transform: translate(-50%, -50%) rotate(36deg) scale(0);
transition: all .2s ease;
}
.qj_checkbox:hover>.qj_inner {
border-color: #409eff;
}
.qj_checkbox>input:checked+.qj_inner {
border-color: #409eff;
background: #409eff;
}
.qj_checkbox>input:disabled+.qj_inner,
.qj_radio>input:disabled+.qj_inner {
cursor: not-allowed;
border-color: #b4bccc;
}
.qj_checkbox>input:disabled+.qj_inner+.qj_label,
.qj_radio>input:disabled+.qj_inner+.qj_label {
cursor: not-allowed;
color: #b4bccc;
}
.qj_radio>input:disabled+.qj_inner:after {
background-color: #b4bccc;
}
.qj_checkbox>input:checked:disabled+.qj_inner {
background: #b4bccc;
}
.qj_checkbox>input:checked+.qj_inner:after {
transform: translate(-50%, -50%) rotate(36deg) scale(1);
}
</style>
</head>
<body>
<label class="qj_radio">
<input type="radio" name="單選">
<span class="qj_inner"></span>
<span class="qj_label">選項(xiàng)1</span>
</label>
<label class="qj_radio">
<input type="radio" name="單選">
<span class="qj_inner"></span>
<span class="qj_label">選項(xiàng)2</span>
</label>
<br><br>
<label class="qj_radio">
<input type="radio" name="單選2" disabled checked>
<span class="qj_inner"></span>
<span class="qj_label">選項(xiàng)3</span>
</label>
<label class="qj_radio">
<input type="radio" name="單選2" disabled>
<span class="qj_inner"></span>
<span class="qj_label">選項(xiàng)4</span>
</label>
<br>
<br>
<label class="qj_checkbox">
<input type="checkbox">
<span class="qj_inner"></span>
<span class="qj_label">選項(xiàng)2</span>
</label>
<label class="qj_checkbox">
<input type="checkbox">
<span class="qj_inner"></span>
<span class="qj_label">選項(xiàng)3</span>
</label>
<label class="qj_checkbox">
<input type="checkbox" disabled checked>
<span class="qj_inner"></span>
<span class="qj_label">禁用選項(xiàng)1</span>
</label>
<label class="qj_checkbox">
<input type="checkbox" disabled>
<span class="qj_inner"></span>
<span class="qj_label">禁用選項(xiàng)2</span>
</label>
</body>
</html>
