复选框 单选框

  作者: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="

<!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>


有用  |  无用

猜你喜欢