CSS 美化checkbox

HTML代码

爱好：
			<label for="travel">
				<input type="checkbox" name="like" value="travel" id="travel">
				<span class="checkbtn"></span>
				<span>旅游</span>
			</label>
			<label for="sports">
				<input type="checkbox" name="like" value="sports" id="sports">
				<span class="checkbtn"></span>
				<span>运动</span>
			</label> -->

核心是隐藏原有的按钮样式，重新构造选中和未选中状态的样式

CSS代码

			input[type="checkbox"] {
				display: none;
			}

			.checkbtn {
				display: inline-block;
				width: 14px;
				height: 14px;
				border: 1px solid #dcdfe6;
				border-radius: 3px;
				position: relative;
			}

			input[type="checkbox"]:checked+span {
				background-color: #409eff;
				border-color: #409eff;
			}

			.checkbtn::after {
				content: '';
				border: 2px solid #fff;
				border-left: 0;
				border-top: 0;
				width: 5px;
				height: 10px;
				position: absolute;
				top: -2px;
				left: 3px;
				transform: rotate(45deg) scaleY(0);
				/* transform-origin: center; */
				/* 过渡的属性	过渡的时长	曲线		延迟时间 */
				transition: transform 0.15s ease-in 0.05s;
			}

			input[type="checkbox"]:checked+span::after {
				transform: rotate(45deg) scaleY(1);
			}