css 自订复选框

Posted 2021-05-13

			<div class="form-group checkw10">
				<input type="checkbox" name="fancy-checkbox-primary-custom-icons" id="fancy-checkbox-primary-custom-icons" autocomplete="off" />
				<div class="btn-group">
					<label for="fancy-checkbox-primary-custom-icons" class="btn btn-primary">
						<span class="glyphicon glyphicon-check"></span>
						<span class="glyphicon glyphicon-unchecked"></span>
					</label>
					<label for="fancy-checkbox-primary-custom-icons" class="btn btn-default active">
						principal
					</label>
				</div>
			</div>

/* ============== CHECKBOX CUSTOM ============== */
.form-group.checkw10 input[type="checkbox"] {
	display: none;
}

.form-group.checkw10 input[type="checkbox"] + .btn-group > label span {
	width: 20px;
}

.form-group.checkw10 input[type="checkbox"] + .btn-group > label span:first-child {
	display: none;
}
.form-group.checkw10 input[type="checkbox"] + .btn-group > label span:last-child {
	display: inline-block;
}

.form-group.checkw10 input[type="checkbox"]:checked + .btn-group > label span:first-child {
	display: inline-block;
}
.form-group.checkw10 input[type="checkbox"]:checked + .btn-group > label span:last-child {
	display: none;
}