This quick tutorial will specifically help you change all your checkboxes and radio buttons to use icons from the Divi font library (as seen in the blurb module). 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).

Hiding the Default Checkboxes & Radio Buttons

This should work for all checkboxes on your site, not just within Gravity Forms. There’s only one part that’s Gravity Forms specific. So you could use with Caldera Forms, Ninja Forms, WP Forms, and checkboxes in your comment forms and elsewhere. You just might need to match that section’s classes to your forms plugin of choice.

Here’s how the first part looks:

input[type=checkbox], input[type=radio] {
  visibility: hidden;
  margin: 0;
  width: 0!important;
}
input[type=checkbox] + label, 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;
}
/* Gravity Forms tweaks - change for your forms plugin */
.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.

Adding Divi’s Icons

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.

How do I do this on a different theme?

This won’t work with themes other than Divi and Extra since they load the icon font used here. Though you could probably extract the font and load it manually, that’s outside the scope of this article. However, you could use Font Awesome to change your radio buttons and checkboxes in the same way. I wrote a separate guide for that.

Can You Help Me With This?

Is this too technical? Or maybe you’re just too busy? Sign up for one of our WordPress management plans, and we’ll do all this for you as part of the included design tweaks.

Tevya

Hi, I'm Tevya! I wrote this. I am the owner of WordXpress and also created Starfish Plugins. I love helping small businesses and WordPress professionals. My wife Jill, helps with the business and is the amazing CEO of our family (3.5 kids). When I'm not working, I like to play basketball, go boating, shoot targets, swim, serve in my church, play Ultimate, and have outdoor adventures as a family.