styled checkbox

HTML

<div class="gf_browser_chrome gform_wrapper gravity-theme" id="gform_wrapper_4"><div id="gf_4" class="gform_anchor" tabindex="-1"></div>
                        <div class="gform_heading">
                            <h2 class="gform_title">Forms Kitchen Sink</h2>
                            <span class="gform_description">A demo page for the forms styling</span>
                        </div><form method="post" enctype="multipart/form-data" target="gform_ajax_frame_4" id="gform_4" action="/forms/#gf_4">
                        <div class="gform_body gform-body"><div id="gform_fields_4" class="gform_fields top_label form_sublabel_below description_below"><div id="field_4_2" class="gfield field_sublabel_below field_description_below gfield_visibility_visible"><label class="gfield_label" for="input_4_2">Focused Field (enter text to test the focus style)</label><div class="ginput_container ginput_container_text"><input name="input_2" id="input_4_2" type="text" value="" class="large" aria-invalid="false" style="background-image: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABHklEQVQ4EaVTO26DQBD1ohQWaS2lg9JybZ+AK7hNwx2oIoVf4UPQ0Lj1FdKktevIpel8AKNUkDcWMxpgSaIEaTVv3sx7uztiTdu2s/98DywOw3Dued4Who/M2aIx5lZV1aEsy0+qiwHELyi+Ytl0PQ69SxAxkWIA4RMRTdNsKE59juMcuZd6xIAFeZ6fGCdJ8kY4y7KAuTRNGd7jyEBXsdOPE3a0QGPsniOnnYMO67LgSQN9T41F2QGrQRRFCwyzoIF2qyBuKKbcOgPXdVeY9rMWgNsjf9ccYesJhk3f5dYT1HX9gR0LLQR30TnjkUEcx2uIuS4RnI+aj6sJR0AM8AaumPaM/rRehyWhXqbFAA9kh3/8/NvHxAYGAsZ/il8IalkCLBfNVAAAAABJRU5ErkJggg==&quot;); background-repeat: no-repeat; background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%;"> </div></div><div id="field_4_3" class="gfield gfield--width-full gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible"><label class="gfield_label" for="input_4_3">Field Error (submit empty field to see error styling)<span class="gfield_required"><span class="gfield_required...

CSS

.gform_wrapper.gravity-theme .gfield input[type="checkbox"] {
	display: none;
}

input[type="checkbox"] + *::before {
	content: "";
	display: inline-block;
	vertical-align: bottom;
	width: 18px;
	height: 18px;
	margin-right: 0.3rem;
	border-radius: 10%;
	border-style: solid;
	border-width: 2px;
	border-color: #c3cbd6;
	flex-shrink: 0;
}

input[type="checkbox"]:checked {
	color: #008ed4;
}

input[type="checkbox"]:checked + *::before {
	content: "";
	color: white;
	text-align: center;
	background: #008ed4;
	background-size:50%;
	border-color: #008ed4;
}