How to Style WordPress’ Checkboxes & Radio Buttons to Use Divi Font Icons

Jacob Stimpson

Verify

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.

You might also like these blogs and articles

Myth

31 Comments

  1. Chris Hershberger-Esh

    THANK YOU. This is so helpful. I was having the worst time trying to restyle the default checkboxes. These look great!

    Reply
    • Tevya

      You’re welcome! So glad this helped, and thanks for letting me know it’s helpful. That keeps me motivated to share more stuff I learn.

    • Jongleur

      How do I make labels bold and one size larger than the default size?
      Please help

  2. Rubiwane

    Dear Tevya,
    I love your CSS but i’m not on divi but on wordpress. Do you know how to implement a bank of icon like font Awesome?
    I love your result.

    Reply
    • Tevya

      Rubiwane, you’d need to first get your site to load Font Awesome. You can add some code in a child theme: http://fontawesome.io/get-started/ or you could try a plugin like this one: https://wordpress.org/plugins/better-font-awesome/.

      Once it’s being loaded, you’d just change the letters inserted using the “content” CSS (2nd box of CSS) to the desired Font Awesome code: http://astronautweb.co/snippet/font-awesome/. So instead of “content: ‘V'” in my CSS, you’d put “content: ‘f00c'” instead. Does that make sense?

    • Rubiwane

      Yes it is 🙂

    • Tevya

      Great! I’m actually working on a post about how to do this with Font Awesome.

  3. Corydon Marrs

    Hey Tevya,
    Excited about implementing this on my WordPress site but running into a problem. I have followed all of your steps but when I swap in the Font Awesome code ie “/f00c” the letters/numbers of the code appear and not the font icon. Have tried with and with the “/”. I have also checked that I have Font Awesome properly installed on my site.
    Any ideas? Your help is more than appreciated!
    Thanks
    Corydon

    Reply
    • Tevya

      Corydon, I’d have to look at it. Can I see where you have it installed? Feel free to reach out directly via our Contact form. I’ve not actually done it with Font Awesome, and don’t have time to setup a demo for it. But if I can look at the front-end of yours, I might be able to figure it out.

  4. Leslie Bernal

    Love this tutorial, but I’m having the hardest time using a similar method with Caldera. Have you ever styled radio buttons and checkboxes using FA on a Caldera form, or are you familiar with why their form seems so differently built? I saw some comments on their site saying the button was nested inside the label tag.

    Reply
    • Tevya

      I’d have to install Caldera somewhere. Any chance you have it on a live site that’s also loading Font Awesome so I can give it a shot via dev tools (won’t affect your site).

  5. Ariel

    This is awesome and exactly what I was looking for! I managed to get it to work with FA as well using the same idea. Thanks!

    Reply
  6. Sam

    This is exactly what I was looking for. Thank you! Any chance you could tell me how to convert radio buttons into large regular buttons? Thanks again!

    Reply
    • Tevya

      What do you mean by “regular buttons”? You can stick HTML into the form, so like insert an image in there. Then just hide the little radio circle with CSS.

  7. Tez

    Is there a way to do this which doesn’t add 300kb of unused icons to the page load time?

    Reply
    • Tevya

      Yes. You could make images and load those. But unless you do them as a sprite (lots more css involved) it’s going to mean more server requests. And if you’re already using Divi’s icons on a page, then this is getting loaded already.

  8. cas

    Hi tevya

    Looks great. 🙂 where should i put the second code? not into the custom css as the 1th code or?

    Reply
    • Tevya

      Hi cas! Yes, both parts go into the same custom CSS field. I just separated them to explain what they do. It’s much harder to follow if it’s just one big block of CSS.

  9. Umesh Rana

    Sir, can we use RadioButtons and CheckBoxes for taking user input on the WordPress page?

    Reply
    • Tevya

      Umesh, I’m not sure I understand what you mean by “WordPress page”?

  10. Theresa

    Howdy looks great but not sure why I can’t get it to work using Divi with Contact form 7 or Formidable forms, shame I get a blank space for it, has the Divi font use changed? Are you using the latest Divi?
    Cheers

    Reply
    • Tevya

      I Theresa, I don’t think Divi changed it’s implementation. I’d have to tinker to see. I didn’t test with CF7 or Formidable Forms. But I’d be happy to take a look and see if I can help, if you want to reach out via our chat bubble or contact page.

  11. Theresa

    Hi I worked it out using the span instead of label by adding this jquery
    jQuery(document).ready(function( $ ) {
    $(‘.with_frm_style .frm_checkbox input[type=checkbox]’).after(”);
    });

    thanks for the great styling and help.

    Reply
  12. Theresa

    It removed a bit of that in brackets as it thought it was code so that bit of jquery won’t work without the span in the last bit as it is missing:

    Reply
  13. Codemine

    You can also try our plugin Form Styler Ultimate.

    With it, you can completely customize the look & feel of your radio / checkboxes on your Gravity Form (as well as every element of your form like inputs,labels, buttons,verification errors, confirmation messages, etc.)

    Thank you

    Reply
  14. Reece

    Hi Tevya. I’d just like to let you know that your styling is great – in Chrome and Opera; it does not work in Firefox and Edge though.
    I’ve had a bit of a play with it and you need to style the and not the checkbox.
    Here are my tweaks that helped me get around the Firefox issue.

    (note that I’m only addressing the checkbox here and not the radio button)

    After hiding the browser’s checkboxes:

    .gfield_checkbox li label {
    text-indent: -1.4em;
    margin: 0 0 0 1em !important;
    }

    .gfield_checkbox li label:hover { cursor: pointer;
    }

    .gfield_checkbox li label:before {
    color: #0c4da2;
    font-family: “ETmodules”;
    content: ‘\56’;
    font-size: 22px;
    position: relative;
    right: 0.5em;
    top: 4px;
    }

    .gfield_checkbox li:hover label:before {
    content: ‘\5a’;
    filter: alpha(opacity=20); opacity: 0.2;
    }

    .gfield_checkbox li input[type=checkbox]:checked + label:before {
    content: ‘\5a’;
    }

    .gfield_checkbox li:hover input[type=checkbox]:checked + label:before {
    filter: alpha(opacity=100);
    opacity: 1;
    }

    Reply
    • Tevya

      Hi Reece, I guess I’ll have to look into that more. We had it loading on the label before. But unfortunately not all plugins put the label in the same relationship to the input. So on WooCommerce and other other places, it wasn’t working at all. Maybe there’s no pure solution, unless you write a bunch of browser-specific CSS, or write a bunch of plugin-specific CSS. Guess this is more complicated than I’d hoped.

      So it should be noted the CSS in the post works for Chrome, but may not work elsewhere. While your modifications will work in Gravity Forms, but may not work elsewhere. Bummer… I may revisit this again in the future. But for now, we have a partial solution. ☹️

    • Tevya

      Okay, Reece, I’ve updated the above CSS to the best my research/brain could produce. It should work on Gravity Forms and WooCommerce, and most other places, on all browsers. But it may not, if the plugin/theme developer has put the input field inside the label, and not followed it with a span.

  15. Holly

    This was incredibly helpful; so glad I found it after working fruitlessly on attempting to do this myself for a couple of hours. Looks beautiful!

    Reply
  16. Jen Galinski

    Is there a way to use CSS targeting to used different styled buttons for different checkbox lists?

    Reply
    • Tevya

      Hi Jen! Yes, you could definitely use CSS to draw checkboxes of your own, or even use emoji for the checkboxes. The above CSS is a great base to start from, but you’d have to remove the parts that load the Elegant Icons font and replace with whatever you’re wanting to use for your checkboxes.

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Subscribe to Our Newsletter for Updates

Stay in the loop and receive exclusive offers!

"*" indicates required fields

Name*
Hidden
Privacy*