This quick tutorial will specifically help you change the Gravity Forms checkboxes and radio buttons to use icons from the Divi font library (as seen in the blurb module). And here’s the key to it all: you can’t style checkboxes and radio buttons. They’re form elements that are set by the operating system (which is why they look so different on a Mac than on Windows). But, fortunately, we can hide the original checkbox/radio button, and replace it with something else. That means the solution here is entirely CSS, that can be added to the “Custom CSS” section of the ePanel (Divi / Theme Options). Here’s how the first part looks:

.gform_wrapper ul.gfield_checkbox li input[type=checkbox], .gform_wrapper ul.gfield_radio li input[type=radio] {
  visibility: hidden;
  margin: 0;
  width: 0!important;
}
.gform_wrapper input[type=checkbox] + label, .gform_wrapper input[type=radio] + label { 
  font-size: 16px; 
}
input[type=checkbox] + label:hover, input[type=radio] + label:hover { cursor: pointer; }
input[type=checkbox] + label:before, input[type=radio] + label:before {
  font-family: "ETmodules";
  font-size: 36px;
  position: relative;
  top: 0.3em;
  margin-right: 0.2em;
}
.gform_wrapper li.gf_list_inline ul.gfield_checkbox li, .gform_wrapper li.gf_list_inline ul.gfield_radio li {
  display: -moz-inline;
  display: inline;
}

The above hides the original OS-controlled checkbox and radio button. It also sets the pointer to look like the label is clickable, and sets the Divi font as well as the size it should display at, for the “:before” pseudo element. This “:before” element is what allows us to insert the font character/icon in front of the label, replacing the original checkbox/radio button that we hid it above.

So now we need to tell that :before pseudo element to display characters from the Divi font, depending on the state of the checkbox:

input[type=checkbox] + label:before { content: '\56'; }
input[type=checkbox] + label:hover:before { content: '\5a'; filter: alpha(opacity=20); opacity: 0.2; }
input[type=checkbox]:checked + label:before { content: '\5a'; }
input[type=checkbox]:checked + label:hover:before { filter: alpha(opacity=100); opacity: 1; }
input[type=radio] + label:before { content: '\5b'; }
input[type=radio] + label:hover:before { content: '\5c'; filter: alpha(opacity=20); opacity: 0.2; }
input[type=radio]:checked + label:before { content: '\5c'; }
input[type=radio]:checked + label:hover:before { filter: alpha(opacity=100); opacity: 1; }

The 1st line above tells it to insert a “\56” character before the label. The “\56” in in the ETmodules font is the empty box icon. Line 2 makes it so that when you hover over it, it shows a lighter version of the checked box (“/5a” character), indicating that clicking will check it. If you don’t like this hover effect, just remove this line & line 4 (and lines 6 & 8 for the radio buttons). Lines 3 & 4 set it to change to the checked-box icon, when it’s checked, and turn off the hover effect. This way you only get the hover effect when it’s not checked. Lines 5-8 repeat the same process for the radio buttons. Here’s what the results look like:

 

Note: if you use Divi & Gravity Forms, I highly recommend installing the “Surbma – Divi & Gravity Forms” plugin. It will style your Gravity Forms to look like the Divi contact form module forms.

This will really work for any forms on a Divi-based site. And the same concept can be used to use Font Awesome icons or some other font icons as well. You’ll just have to enqueue the font in your header. In Divi you can do that by adding the font code under Divi > Theme Options > Integration > “Add code to the <head> of your blog”. You can apply the same concepts to style Gravity Forms checkboxes and radio buttons with any theme, or anywhere those form elements occur. If you’d like to try this with a different theme, forms plugin, or icon font, you can can find more details on this method over on Hongkiat.com.

Get 5-Star Reviews!

On Facebook, Google, Yelp, Amazon, TripAdvisor, & many more, using our WordPress plugin.

Hi, I’m Tevya! I wrote this post. I also created Starfish Plugins (the company) and this website. I’m always looking for ways to help small businesses and WordPress professionals. Right now, I’m most excited about Starfish Reviews and online reputation management. Feel free to connect with me on social media, or email me.

Pin It on Pinterest