Blog: WordPress
1970s Fisher stereo

Styling Radio Buttons in Gravity Forms

Avatar for John Locke

John Locke is a SEO consultant from Sacramento, CA. He helps manufacturing businesses rank higher through his web agency, Lockedown Design & SEO.

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;
}


Avatar for John Locke

John Locke is a SEO consultant from Sacramento, CA. He helps manufacturing businesses rank higher through his web agency, Lockedown Design & SEO.

4 comments on “Styling Radio Buttons in Gravity Forms

    1. Hi Alexander:

      1. Here’s an example of this code in action: http://xerimis.com/contact/
      Instead of the default black radio buttons, you get orange radio buttons.

      2. There might be a filter for changing the structure, but off the top of my head, I’m not sure. A good place to ask might be the Gravity Forms support channel if you have a Dev license.

      Thanks for stopping by!
      -John

Join the Conversation

Your email address will be kept private. Required fields marked *.