scss 样式复选框

Posted 2021-05-17

.gfield_checkbox,
.gfield_radio {
	label {
		padding-left:10px !important;
		&:before {
			content: "";
			display: inline-block;
			width: 20px;
			height: 20px;
			margin-right: 10px;
			position: absolute;
			left: 0;
			bottom: 10px;
			background-color: #ffffff;
			border: 1px solid #28a992;
			border-radius: 2px;
			background-repeat: no-repeat;
		}
	}
	input[type='radio']:checked,
	input[type='checkbox']:checked {
		+label {
			padding-left:10px !important;
			&:before {
				content: "";
				color: #28a992;
				font-size: 30px;
				text-align: center;
				line-height: 12px;
				background-image: url(../../images/tick-icon-green.svg);
				background-size: 11px;
				background-position: center center;
			}
		}
	}
}