Styling Radio Buttons in Gravity Forms

I knew this Gravity Forms code would come in handy sometime.

Mostly, I’m writing it down for my own reference material, so I can Google it later.

So, this is some code I wrote in late-2016 for a custom theme project where I had to style Gravity Forms radio buttons to have different color “bullets” with cross-browser support.

Most browsers default to black circles when you make a selection with radio buttons in Gravity Forms. But when I was doing web development as a contractor, before pushing forward as an SEO agency, I’d occasionally get mockups from agencies where the “selected” radio buttons were colored.

Now, many designers don’t know that it’s a pain to override default browser styles, especially with form elements. But, where there’s a will, there’s a way, right?

If you aren’t using Gravity Forms, might I suggest using the Formstone library of components to get the job done? This will save a lot of hassle on web projects where cross-browser uniformity in your UI is important.

There’s also code here for Gravity Forms checkboxes, which is what we ended up using on the client project. In other words, you can use checkboxes, and they will look like radio buttons, if that’s your jam. Personally, I would just stick to leaving checkboxes styled as boxes for user experience purposes, but it’s nice to have options.

The Code You Came Here To Copy and Paste

/* Put this in your Style.css
-------------------------------*/

.gfield_checkbox li, .gfield_radio li {
  position: relative;
}

body .gform_wrapper .gfield_radio li label {
  margin: 2px 0 0 21px;
}

body .gform_wrapper ul li.gfield.optional .gfield_checkbox label::after,
body .gform_wrapper ul li.gfield.optional .gfield_radio label::after {
  content: "";
  opacity: 1;
}

body .gform_wrapper .gfield_radio li input[type="radio"],
body .gform_wrapper .gfield_checkbox li input[type="checkbox"] {
  display: none;
}
ul.gfield_checkbox li[class^="gchoice"] label:before,
ul.gfield_checkbox li[class^="gchoice"] label:after,
ul.gfield_radio li[class^="gchoice"] label:before,
ul.gfield_radio li[class^="gchoice"] label:after {
  bottom: 0;
  content: '';
  margin: auto;
  position: absolute;
  top: 0;
}
ul.gfield_checkbox li[class^="gchoice"] label:after,
ul.gfield_radio li[class^="gchoice"] label:after {
  content: "";
  background-color: #fff;
  border: solid 1px #3c3c3c;
  border-radius: 50%;
  display: inline-block;
  height: 13px;
  left: 0;
  position: absolute;
  top: 0;
  transition: left .25s, background-color .13s;
  width: 13px;
}
ul.gfield_checkbox input[type="checkbox"]:checked + label:before,
ul.gfield_radio input[type="radio"]:checked + label:before {
  content: "●";
  color: #00afd5;
  font-size: 18.5px;
  font-weight: 700;
  left: 1px; /*.75px*/
  text-align: center;
  top: -1px;
  z-index: 9;
}