Radio box styling for Contact Form 7

Hey there, here’s an update on the way I style up Radio inputs in Contact Form 7, this is in an update on the previous post about styling checkboxes as the same method applies.

When you are adding your radio buttons in the backend ensure they have a unique name for good practice and ensure the ‘Wrap each item with a label element‘ checkbox is ticked. Then give your Radio Buttons a class: nnm-wpcf7-radio and the below scss or css will arrange you some radio boxes:

SCSS

.nnm-wpcf7-radio {
  display: block;
  background: #000;
  padding: 8px 9px;
  margin-bottom: 18px;
  font-size: 15px;

  .wpcf7-list-item {
    position: relative;
    margin: 0 20px 0 0;
    padding: 0 0 0 24px;

    label {
      margin: 0;
      padding: 0;
    }
  }

  .wpcf7-list-item-label {
    &::before {
      position: absolute;
      left: 0;
      top: 2px;
      background: #000;
      width: 16px;
      height: 16px;
      content: "";
      z-index: 0;
    }

    &::after {
      font: normal normal normal 14px/1 FontAwesome, serif;
      font-size: inherit;
      text-rendering: auto;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      position: absolute;
      left: 2px;
      font-size: 14px;
      top: 3px;
      z-index: 1;
      color: #fff;
    }
  }

  input {
    position: absolute;
    visibility: hidden;

    &:checked + .wpcf7-list-item-label::after { content: "\f00c"; }
  }
}

CSS

.nnm-wpcf7-radio {
  display: block;
  background: #000;
  padding: 8px 9px;
  margin-bottom: 18px;
  font-size: 15px;
}
.nnm-wpcf7-radio .wpcf7-list-item {
  position: relative;
  margin: 0 20px 0 0;
  padding: 0 0 0 24px;
}
.nnm-wpcf7-radio .wpcf7-list-item label {
  margin: 0;
  padding: 0;
}
.nnm-wpcf7-radio .wpcf7-list-item-label::before {
  position: absolute;
  left: 0;
  top: 2px;
  background: #000;
  width: 16px;
  height: 16px;
  content: "";
  z-index: 0;
}
.nnm-wpcf7-radio .wpcf7-list-item-label::after {
  font: normal normal normal 14px/1 FontAwesome, serif;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: absolute;
  left: 2px;
  font-size: 14px;
  top: 3px;
  z-index: 1;
  color: #fff;
}
.nnm-wpcf7-radio input {
  position: absolute;
  visibility: hidden;
}
.nnm-wpcf7-radio input:checked + .wpcf7-list-item-label::after {
  content: "\f00c";
}

If you got the scss then you already know where it goes, and those of you copying the css, drop that into the ‘Additional CSS‘ box in your Dashboard >> Appearance >> Customize page. If for some mad reason you don’t have that then check your theme options for a css entry box or in the worst case scenario head to the theme editor and manually add it to the style.css file, right at the end.

We’re assuming you’ve got Font Awesome lined up too, if so you’ve radio boxes will have switched up from the default radio circles to squares with checks. Swap the…

content: "\f00c";

…content value for other icons from the Font Awesome library, you may need to adjust the ‘left‘ and ‘top‘ css values of .nnm-wpcf7-radio .wpcf7-list-item-label::after if you use a different icon – or to just see how it works.

If you’re not using Font Awesome then swap that content value for a unicode symbol or completely ditch it and add a border and background to .nnm-wpcf7-radio input:checked + .wpcf7-list-item-label::before instead, you can delete the first five lines where Font Awesome is declared too.

Hopefully this is useful! Let me know..