复选框 单选框
作者：chrispy
<!DOCTYPE html>
<html>
<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>复选框 单选框</title>
</head>
<body>
<input type="checkbox" name="checkbox" id="c1" disabled>
<label for="c1">苹果</label>
<input type="checkbox" name="checkbox" id="c2">
<label for="c2">香蕉</label>
<style>
.checkbox {display: none}
.checkbox+label {position: relative;cursor: pointer;}
.checkbox+label::before {width: 20px;height: 20px;border: 1px solid #f60;display: inline-block;content: '';border-radius: 50%;}
.checkbox:checked+label::before {background: #fff}
.checkbox:checked+label::after {background: #f60;position: absolute;content: '';top: 1px;left: 6px;width: 6px;height: 6px;border: 2px solid #f60;border-radius: 50%;}
.checkbox:disabled+label::before{border: 1px solid #ccc;}
.checkbox:disabled+label::before{border: 1px solid #ccc;cursor:not-allowed}
</style>
</body>
</html>