Custom Gravity Forms Checkbox & Radio Button CSS Styles

custom.css

/* 
 * # Custom Gravity Forms Checkbox & Radio Button Styles - v.1.0
 * Author: [Daniel McClure](https://www.danielmcclure.com/code/)
 * License: MIT
 */

/* Base input and label configuration */
.gfield_checkbox li, 
.gfield_radio li {
	position: relative;
}

body .gform_wrapper .gfield_radio li label, 
body .gform_wrapper .gfield_checkbox li label {
	margin: 2px 0 0 21px;
}

body .gform_wrapper ul li.gfield.optional .gfield_checkbox label::after,
body .gform_wrapper ul li.gfield.optional .gfield_radio label::after {
	content: "";
	opacity: 1;
}

body .gform_wrapper .gfield_radio li input[type="radio"],
body .gform_wrapper .gfield_checkbox li input[type="checkbox"] {
	display: none;
}

ul.gfield_checkbox li[class^="gchoice"] label:before,
ul.gfield_checkbox li[class^="gchoice"] label:after,
ul.gfield_radio li[class^="gchoice"] label:before,
ul.gfield_radio li[class^="gchoice"] label:after {
	bottom: 0;
	content: '';
	margin: auto;
	position: absolute;
	top: 0;
}

/* Radio Button Styles */
ul.gfield_radio input[type="radio"] + label:before {
	content: "";
	background-color: #D9D9D9;
	border: solid 1px #9c9c9c;
	border-radius: 50%;
	display: inline-block;
	height: 1rem;
	left: 0;
	position: absolute;
	top: 0;
	transition: left .25s, background-color .13s;
	width: 1rem;
}

/* Checkbox Styles */
ul.gfield_checkbox input[type="checkbox"] + label:before{
	content: "";
	background-color: #D9D9D9;
	border: solid 1px #9C9C9C;
	border-radius: 3px;
	display: inline-block;
	height: 1rem;
	left: 0;
	position: absolute;
	top: 0;
	transition: left .25s, background-color .13s;
	width: 1rem;
}

/* Checked Radio Button & Checkbox Styles */
ul.gfield_checkbox input[type="checkbox"]:checked + label:before,
ul.gfield_radio input[type="radio"]:checked + label:before {
	content: "";
	background-color: #FFFFFF;
	border: solid 1px #87C543;
	display: inline-block;
	height: 1rem;
	left: 0;
	position: absolute;
	top: 0;
	transition: left .25s, background-color .13s;
	width: 1rem;
}
ul.gfield_checkbox input[type="checkbox"]:checked + label:after,
ul.gfield_radio input[type="radio"]:checked + label:after {
	top: 0px;
	left: 0.25rem;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: #87C543;
}

/* Adds checkmark instead of circle mark for checkboxes
 * Requires Font Awesome - https://fontawesome.com
 * Delete to use circle mark without dependencies
 */
ul.gfield_checkbox input[type="checkbox"]:checked + label:after{
	background: transparent;
	content: "\f00c";
	color: #87C543;
	font-family: "FontAwesome";
	font-size: 0.75rem;
	transition: color .2s;
	top: -0.55rem;
	left: 0.15rem;
	width: 0.5rem;
	height: 0.5rem;
}