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).

Here’s what the results look like:

Divi font checkboxes radio buttons wordpress

This should work for all checkboxes on your site, including WooCommerce, Gravity Forms, Caldera Forms, Ninja Forms, WP Forms, and checkboxes in your comment forms and elsewhere. Though you just might need to add a little positioning, depending.

Hiding the Default Checkboxes & Radio Buttons

The CSS is down below. This is an explanation of what you’ll find there. “Section 1” hides the original OS-controlled checkbox and radio button. The next section 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 checkbox/radio button. But since we already hid it, it’ll replace the original checkbox/radio button.

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.

“Section 2” of the CSS below 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 the lines that have “:hover” in part of them from Section 2. The other lines 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. The rest of the section repeats the same process for the radio buttons.

The Amazing CSS

/** SECTION 1 **/

/* Hide the OS/Browser checkboxes/radio buttons */
input[type=checkbox], input[type=radio] {
  visibility: hidden!important;
  margin: 0!important;
  width: 0!important;
}

/* Set Elegant Icont font, size, & positioning for the checkboxes/radio buttons plus the cursor on hover */
input[type=checkbox] + label:before,
input[type=checkbox] + span:before,
input[type=radio] + label:before {
  visibility: visible;  
  font-family: "ETmodules";
  font-size: 30px;
  position: relative;
  top: 6px;
  padding-right: 8px;
}

input[type=checkbox] + label:hover,
input[type=checkbox] + span:hover,
input[type=radio] + label:hover { 
  cursor: pointer; 
}

/** SECTION 2 **/

/* Set checkbox to ET icons: normal, hover, checked, & checked hover */
input[type=checkbox] + label:before,
input[type=checkbox] + span:before { 
  content: '\56'; 
}
input[type=checkbox] + label:hover:before,
input[type=checkbox] + span:hover:before {
  content: '\5a'; 
  filter: alpha(opacity=20); 
  opacity: 0.2;
}
input[type=checkbox]:checked + label:before,
input[type=checkbox]:checked + span:before {
  content: '\5a';
}
input[type=checkbox]:checked + label:hover:before,
input[type=checkbox]:checked + span:hover:before { 
  filter: alpha(opacity=100); opacity: 1; 
}

/* Set radio buttons Divi icons: normal, hover, checked, & checked hover */
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; 
}

Update 23 Feb 2018:

It was brought to my attention that the below CSS won’t work for the “terms and conditions” checkbox on WooCommerce as well as other situations where the “input” field is nested as a child of the “label” element. I thought we could move the :before pseudo-element to the input itself. Unfortunately, that breaks standards, and doesn’t work on browsers other than Chrome.

And there’s no pure CSS way to target the label parent of a checked input. So we’re stuck. The above is the best we get, and it won’t work anywhere the <input> is inside the <label>. I’ve added a specific case for the WooCommerce terms above, and opened the issue with WooCommerce. I encourage all plugin and theme devs to put the “input” after the “label” as a sibling, on checkboxes and radio buttons.

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.