Checkbox and Radio Button Custom - Contact Form 7

contact-form7.scss

.wpcf7-checkbox, .radio {
	display: block;
    margin: 10px 0 0;

	.wpcf7-list-item {
		display: block;

		input[type=checkbox], input[type=radio] {
			display: none;

			&:checked + .wpcf7-list-item-label::before {
				content: "\f0c8";
				color: #ffd400;
				font-size: 9px;
				font-family: FontAwesome;
			    font-style: normal;
			    font-weight: normal;
			    line-height: 14px;
			    text-decoration: inherit;
				text-align: center;
			}
		}
	}

	.wpcf7-list-item-label {
		display: inline-block;
		font-family: "Arial", sans-serif;
		font-size: 14px;
		font-weight: normal;
		left: 15px;
		line-height: 14px;
		margin: 0 0 15px;
		position: relative;

		&::before {
			background: #ffffff;
			border: 1px solid $000000;
			border-radius: 3px;
			content: "";
			height: 15px;
			left: -22px;
			position: absolute;
			width: 15px;
		}

		&:hover {
			cursor: pointer;
		}
	}
}

.radio {
	.wpcf7-list-item-label {
		&::before {
			border-radius: 100%;
		}
	}
}