How to turn Divi checkbox and radio inputs into buttons

Code Snippets, Divi, Tutorials

Often times when creating a form on a website we need to give our users the ability to select from a few predefined options. This is where checkbox and radio inputs come in really handy.

The trouble is that sometimes these inputs just look… boring.

Never fear! Here is a quick and simple CSS snippet you can use to turn these boring old checkbox and radio inputs into beautiful buttons that actually make your form look more user-friendly and modern.

Divi contact form checkbox buttons.
I’m thinking about getting a carrier pigeon.

The code below will affect BOTH checkboxes and radio inputs so feel free to use both types of inputs in your forms.

Be sure to give your contact form module a custom class. The code below assumes you’ve given your contact form module a custom class of checkbox_radio_button_wpcc but feel free to change as desired.

I’ve left comments in explaining the code if you want to make changes to match your style and theme.

.checkbox_radio_button_wpcc .et_pb_contact_field_checkbox,
.checkbox_radio_button_wpcc .et_pb_contact_field_radio {
  display: inline-block; /* comment this out if you want buttons to lined up vertically */

/* This block hides the input fields. */
.checkbox_radio_button_wpcc .et_pb_contact_field_checkbox i, 
.checkbox_radio_button_wpcc .et_pb_contact_field_radio i {
  position: absolute;
  visibility: hidden !important;
  display: none !important;

/* Now we make the label the button. Style accordingly. */
.checkbox_radio_button_wpcc .et_pb_contact_field_checkbox label,
.checkbox_radio_button_wpcc .et_pb_contact_field_radio label {
  border: 1px solid;
  border-color: #ddd;
  border-radius: 5px;
  color: #aaa;
  display: inline-block;
  cursor: pointer;
  font-weight: bold;
  font-size: 16px !important;
  line-height: 1em !important;
  max-width: 100%;
  padding: 10px;
  margin: 0 5px 5px 0 !important;
  transition: all ease .3s;

/* Button styles when hovered. */
.checkbox_radio_button_wpcc .et_pb_contact_field_checkbox label:hover,
.checkbox_radio_button_wpcc .et_pb_contact_field_radio label:hover {
  background-color: transparent;
  border-color: #00cec9;
  color: #00cec9;

/* Button styles when checked. */
.checkbox_radio_button_wpcc .et_pb_contact_field_radio input[type=radio]:checked + label,
.checkbox_radio_button_wpcc .et_pb_contact_field_checkbox input[type=checkbox]:checked + label {
  color: #fff;
  background: #00cec9;
  border-color: #00cec9;

If you have any questions about implementing the code or extending it further, I’d love to talk about it!

Drop your thoughts in the comments below and happy designing!

Join the Discussion

Have something to add to this or want to comment on something mentioned in the article? Hop on over to our offical Facebook page and join the discussion!

About the Author

Alex Brinkman

Alex Brinkman

In addition to being an entrepreneur, Alex is addicted to lifestyle design, a sucker for motivational quotes and: "... just an all around great guy." - everyone When he's not busy banging on a laptop in a some obscure coffeeshop, he enjoys obstacle course races, giving random strangers compliments and automating as much of his life as possible.