SCSS for Gravity Forms custom checkbox, styles from https://codepen.io/CreativeJuiz/pen/BiHzp

gf_custom_checkbox

.ginput_container {
	overflow: hidden;
	margin: 5px 0 0;
	padding: 1rem;
	background-color: #dcdcdc;
	border-radius: 4px;

	ul.gfield_checkbox li input{
		
		&[type="checkbox"]:not(:checked),
		&[type="checkbox"]:checked {
			position: absolute;
			left: -9999px;

			&+label{
				position: relative;
				padding-left: 1.95em;
				cursor: pointer;
				line-height: 2;

				&::before{
					content: '';
					position: absolute;
					left: 0;
					top: 0;
					width: 1.85em;
					height: 1.85em;
					border: 2px solid $primary-color;
					background: #fff;
					border-radius: 4px;
					box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
				}

				&::after{
					content: '\2714';
					position: absolute;
					top: .2em;
					left: .3em;
					font-size: 1.6em;
					line-height: 0.8;
					color: #09ad7e;
					transition: all .2s;
				}

				&:hover:before {
				  border: 2px solid $secondary-color !important;
				}
			}
		}

		&[type="checkbox"]:not(:checked)+label:after{
			opacity: 0;
			transform: scale(0);
		}

		&[type="checkbox"]:checked+label:after {
			opacity: 1;
			transform: scale(1);
		}

		&[type="checkbox"]:disabled:not(:checked) + label:before,
		[type="checkbox"]:disabled:checked + label:before {
			box-shadow: none;
			border-color: #bbb;
			background-color: #ddd;
		}
		&[type="checkbox"]:disabled:checked + label:after {
			color: #999;
		}
		&[type="checkbox"]:disabled + label {
			color: #aaa;
		}

		&[type="checkbox"]:checked:focus + label:before,
		[type="checkbox"]:not(:checked):focus + label:before {
			border: 2px dotted $primary-color;
		}
		
	}
}