css 自订复选框

Posted 2021-05-13

<label class="check-label"><input type="checkbox" name="activite" value="value 1"><span class="checkmark"></span>Text</label>

.check-label {
	width: 100%;
	box-sizing: border-box;
	border-radius: 3px;
	border: 1px solid #e0d0d0;
	color: #777;
	font-size: 16px;
	background-color: #eef2f7;
	margin: 5px 0;
	padding: 15px 20px 15px 60px;
	position: relative;
}

.check-label input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

.checkmark {
	position: absolute;
	top: 15px;
	left: 15px;
	height: 25px;
	width: 25px;
	border-radius: 3px;
	background-color: #eee;
}

.checkmark:after {
	content: '';
	position: absolute;
	display: none;
	left: 9px;
	top: 5px;
	width: 5px;
	height: 10px;
	border: solid white;
	border-width: 0 3px 3px 0;
	transform: rotate(45deg);
}

.check-label:hover input ~ .checkmark {
	background-color: #ccc;
}

.check-label input:checked ~ .checkmark {
  background-color: #2196F3;
}

.check-label input:checked ~ .checkmark:after {
	display: block;
}