Change Caldera Forms Toggle Switch Buttons To Images

CF-toggle-img-replacement.css

/* 
 * Change Caldera Forms Toggle Switch Buttons To Images
 * Read https://gist.github.com/New0/7e385d497052a4fd171314b299f3dd13#file-cf-toggle-img-replacement-md
*/
/* Hide original Toggle Field */
.cf-toggle-group-buttons a {
	visibility: hidden;
}
/* First toggle option */
.cf-toggle-group-buttons a:nth-child(1):before {
	content: url("IMG_URL");
	position: absolute;
	visibility: visible;
}
/* Second toggle option */
.cf-toggle-group-buttons a:nth-child(2):before {
	content: url("IMG_URL");
	position: absolute;
	visibility: visible;
}

CF-toggle-img-replacement.md

Note : this code is really generic and will work if only one toggle field is used in the website.

In order to make it more precise we would have to add the form ID or the precise field ID (https://www.w3schools.com/cssref/css_selectors.asp)

1 - Upload the images via the media library

2 - Copy and paste the code below to Appearance -> Customizer -> Additonal CSS

3 - Replace the IMG_URL in the code with the URL of the images from the media library.

The code shows two toggle options, in order to match the number of options in the toggle field, Copy and paste the code for first toggle option and replace the number in the code (1) to the corresponding option number

!!!! Add an html field after the toggle option field and use a magic tag ( %toggle_field_slug% ) in order to print the selected value. !!!!!