Formidable Forms: Radio Button and Checkbox Styles

Creating custom styles for your radio buttons and checkboxes can be extremely difficult, especially as we cannot style them using CSS. Or can we?

This guide will cover a neat workaround on how you can style custom radio buttons and checkboxes for your form using Formidable Forms. We have live demos below which will show you everything we’ll cover in this guide along with various options on how to implement these depending on what your goal is.

Demo - Radio Button Test

Original

Radio Buttons
Checkboxes

Material Style

Radio Buttons
Checkboxes

Toggle Style

Radio Buttons
Checkboxes

Flat Style

Radio Buttons
Checkboxes

The Code

To implement any of the styles above we need to add a small piece of JavaScript and some CSS. The JS is required for any of the additional styles and the CSS is optional depending on the version you wish to use.

The CSS provided below can be implemented in a number of ways depending on your needs. We have outlined a few scenarios below that you may find useful.

The JS

Start by adding the following JS to either the ‘Before Fields’ section of your form or, if you want to apply the style to all forms on your website, to your theme. If your theme doesn’t have anywhere to add custom JS then you can edit your theme files or use a plugin.

<!-- Formidable Button Script -->
<script type="text/javascript">
jQuery(document).ready(function($){
   $('.with_frm_style .frm_radio input[type=radio]').after('<span>'); // Remove this line if you do not wish to style radio buttons
   $('.with_frm_style .frm_checkbox input[type=checkbox]').after('<span>'); // Remove this line if you do not wish to style checkboxes
});
</script>

What it does: This snippet of JS will add a blank <span></span> after the <input> in your HTML which we can then target with our CSS to create the new styles. All of the styles below will work by hiding the default <input> html element and creating a new <span> element in its place which we can re-style.

The CSS

Below is the CSS for each of the 3 versions above. There are multiple ways of implementing the CSS depending on your needs. Below the CSS we have outlined some instructions for implementing the CSS for 3 common scenarios but you may still need to make some adjustments for your theme & styling.

/* Material Button CSS */

@keyframes ripple {
  0% {
    box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0);
  }
  50% {
    box-shadow: 0px 0px 0px 15px rgba(0, 0, 0, 0.1);
  }
  100% {
    box-shadow: 0px 0px 0px 15px rgba(0, 0, 0, 0);
  }
}
.frm_checkbox,
.frm_radio {
    margin-left: 0px;
    margin-bottom: 15px !important;
}

.frm_checkbox label,
.frm_radio label {
    display: inline-block;
    height: 25px;
    position: relative;
    padding: 0 30px;
    margin-bottom: 0;
    cursor: pointer;
    vertical-align: bottom;
}

.frm_checkbox input[type=checkbox],
.frm_radio input[type=radio] {
    position: absolute !important;
    margin-left: -9999px;
    visibility: hidden;
}

.frm_checkbox input[type=checkbox] + span,
.frm_radio input[type=radio] + span {
    display: inline-block;
    position: relative;
    cursor: pointer;
    outline: none;
    user-select: none;
}

.frm_checkbox input[type=checkbox] + span,
.frm_radio input[type=radio] + span {
    width: 35px;
    height: 25px;
    vertical-align: middle;
}

.frm_checkbox input[type=checkbox] + span:before,
.frm_checkbox input[type=checkbox] + span:after,
.frm_radio input[type=radio] + span:before,
.frm_radio input[type=radio] + span:after {
    position: absolute;
    content: '';
    border-radius: 50%;
    transition: all .3s ease;
    transition-property: transform, border-color;
}

.frm_checkbox input[type=checkbox]:checked + span:before,
.frm_radio input[type=radio]:checked + span:before {
    border-color: #e03c83;
    animation: ripple 0.2s linear forwards;
}

.frm_checkbox input[type=checkbox] + span:before,
.frm_radio input[type=radio] + span:before {
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(0, 0, 0, 0.54);
}

.frm_checkbox input[type=checkbox] + span:after,
.frm_radio input[type=radio] + span:after {
  top: 5px;
  left: 5px;
  width: 14px;
  height: 14px;
  transform: scale(0);
  background: #e03c83;
}

.frm_checkbox input[type=checkbox]:checked + span:after,
.frm_radio input[type=radio]:checked + span:after {
    transform: scale(1);
    -webkit-transform: scale(1);
}
/* Toggle Button CSS */

.frm_checkbox,
.frm_radio {
    margin-left: 0px;
    margin-bottom: 8px !important;
}

.frm_checkbox label,
.frm_radio label {
    padding : 4px 0px
}

.frm_checkbox input[type=checkbox],
.frm_radio input[type=radio] {
    position: absolute !important;
    margin-left: -9999px;
    visibility: hidden;
}

.frm_checkbox input[type=checkbox] + span,
.frm_radio input[type=radio] + span {
    display: inline-block;
    position: relative;
    cursor: pointer;
    outline: none;
    user-select: none;
}

.frm_checkbox input[type=checkbox] + span,
.frm_radio input[type=radio] + span {
    padding: 2px;
    width: 40px;
    height: 25px;
    background-color: #cccccc;
    border-radius: 30px;
    transition: background 0.4s;
    vertical-align: middle;
    margin-right: 4px;
}

.frm_checkbox input[type=checkbox] + span:before,
.frm_checkbox input[type=checkbox] + span:after,
.frm_radio input[type=radio] + span:before,
.frm_radio input[type=radio] + span:after {
    display: block;
    position: absolute;
    content: "";
}

.frm_checkbox input[type=checkbox]:checked + span:before,
.frm_radio input[type=radio]:checked + span:before {
    background-color: #e03c83;
}

.frm_checkbox input[type=checkbox] + span:before,
.frm_radio input[type=radio] + span:before {
    top: 2px;
    left: 2px;
    background-color: #cccccc;
    border-radius: 50%;
    transition: background 0.4s;
}

.frm_checkbox input[type=checkbox] + span:after,
.frm_radio input[type=radio] + span:after {
    bottom: 1px;
    left: 1px;
    width: 23px;
    height: 23px;
    background-color: #ffffff;
    border-radius: 50%;
    transition: margin 0.4s, background 0.4s;
    box-shadow: 0 2px 5px #999;
}

.frm_checkbox input[type=checkbox]:checked + span,
.frm_radio input[type=radio]:checked + span {
    background-color: #e03c83;
}

.frm_checkbox input[type=checkbox]:checked + span:after,
.frm_radio input[type=radio]:checked + span:after {
    margin-left: 15px;
    background-color: #ffffff;
}
/* Flat Style Button */

.frm_checkbox,
.frm_radio {
    margin-left: 0px;
    margin-bottom: 15px !important;
}

.frm_checkbox label,
.frm_radio label {
    height: 25px;
    position: relative;
    padding: 0 0 0 25px !important;
    text-indent: 10px !important;
    margin-bottom: 0;
    cursor: pointer;
    vertical-align: bottom;
}

.frm_checkbox input[type=checkbox],
.frm_radio input[type=radio] {
    position: absolute !important;
    margin-left: -9999px;
    visibility: hidden;
}

/* Hide the browser's default checkbox */
.frm_checkbox label input[type=checkbox],
.frm_radio label input[type=radio]{
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.frm_checkbox span,
.frm_radio span{
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}

/* On mouse-over, add a grey background color */
.frm_checkbox label:hover input[type=checkbox] ~ span,
.frm_radio label:hover input[type=radio] ~ span{
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.frm_checkbox label input[type=checkbox]:checked ~ span,
.frm_radio label input[type=radio]:checked ~ span{
  background-color: #e03c83;
}

/* Create the checkmark/indicator (hidden when not checked) */
.frm_checkbox span:after,
.frm_radio span:after{
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.frm_checkbox label input[type=checkbox]:checked ~ span:after,
.frm_radio label input[type=radio]:checked ~ span:after{
  display: block;
}

/* Style the checkmark/indicator */
.frm_checkbox label span:after,
.frm_radio label span:after{
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

How to install

There are quite a few ways of installing these styles to your forms and it can vary depending on how you’d like to use them. So we’ve come up with 3 of the most common scenarios to help guide you to changing the styles of your radio and checkbox fields.

Scenario 1

Apply the same style to all radio buttons & checkboxes across your entire site.

If you’d like all your forms to have a consistent look and feel, you may wish to utilise the same styles to all the forms across your website. If this is something you want to achieve, you can follow the steps below:

  1. Copy and paste the JS snippet globally to your theme options or plugin. If your theme does not allow you to
  2. Copy and paste the CSS of your chosen style globally to your theme’s CSS files.

The CSS here will hide the <input> element which ships with the default radio button and checkboxes and create new styles for the <span> and their pseudo elements we created with our JS snippet from Step 1.

Scenario 2

Apply the same style to all radio buttons & checkboxes in individual forms.

Unlike in the first scenario, you may only want a custom style to your radio buttons and checkboxes on individual forms, if so, you can follow the steps below:

  1. Copy and paste the JS snippet to the ‘Before Fields’ of the form you wish to style. Although, if your theme allows you to add JS to the theme files directly, you may wish to add this code here if you’d like to apply styles on multiple forms.
  2. Copy and paste the CSS of your chosen style either globally to your theme’s CSS files or to the individual forms/pages.

Just like in Scenario 1, this will hide the default <input> elements and create new styles for the <span> elements. The only difference here, is that the styles will only apply to the form(s) you’ve added the JS/CSS to.

If you’re adding the CSS globally, you may want to specify a class name to target only the form(s) you wish to style in order to prevent overwriting radio/checkbox styles on any other forms within your site that you may want to leave as default or style differently.

We recommend setting class names to the HTML form element you’d like to apply the styles to. This can be done under the form Settings > Customize HTML > Form Classes.

Then you’ll need to add the class name to each of the CSS rules we imported for Step 2. For example:

/* Targeting our Custom Form */

.custom_form .frm_checkbox,
.custom_form .frm_radio {
    margin-left: 0px;
    margin-bottom: 15px !important;
}

Here, we have given our form a class of .custom_form and targeted all radio and checkbox fields within these forms.

Scenario 3

Apply mixed styles to a single form.

You may want to implement multiple styles to your form, whether you’d like different radio buttons and checkboxes, or different styles for a particular section or field in your form. For example, you may want to use the Material Design as the radio buttons and the Flat Design for checkboxes or perhaps you’d like to use Material Design for Section 1 of the form and Flat Design for Section 2.

This requires a bit more development, but can be followed using the steps below:

  1. Copy and paste the JS snippet either globally or to the ‘Before Fields’ of the form you wish to style.
  2. Copy and paste the CSS of your chosen styles either globally or to the individual forms/pages.
  3. You will need to add a class name to the CSS to differentiate both styles we’re going to use. We’ve gone for .version_1 and .version_3 in the example below.
  4. Lastly, we will need to add these class names to the section or fields in the HTML where we want the styles to appear. This can be added under Settings > Customize HTML as seen below.
/* Differentiating Both Styles */

.version_1 .frm_radio input[type=radio] + span:before,
.version_1 .frm_radio input[type=radio] + span:after {
  /*
  * Styles go here
  */
}

.version_3 .frm_radio input[type=radio] + span:before,
.version_3 .frm_radio input[type=radio] + span:after {
  /*
  * Styles go here
  */
}

.version_3 .frm_checkbox span:after,
.version_3 .frm_radio span:after{
  /*
  * Styles go here
  */
}

<!-- Customize HTML / Section 1 -->
<div id="frm_field_[id]_container" class="version_1 frm_form_field form-field [required_class][error_class]">
  <!-- Section markup goes here -->
</div>


<!-- Customize HTML / Section 2 -->
<div id="frm_field_[id]_container" class="version_3 frm_form_field form-field [required_class][error_class]">
  <!-- Section markup goes here -->
</div>

Remember: You’ll need to differentiate the two styles you imported in Step 2 CSS when using this method to avoid your CSS from being overwritten. A live demo of this example can be seen below.

Mixing Styles

As mentioned above it’s possible to mix styles and have a different style for radio buttons and checkboxes. There are many ways to achieve this using the code above and is shown in the demo below.

Demo - Styled Radio Buttons & Checkboxes

Mixed Styles

Radio Buttons with animation

Optional Extra

We can also include some CSS to animate in any conditional fields / sections which adds a nice animation effect to our forms. This can also be added to the Formidable > Styles > Custom CSS section to apply it site-wide or to individual pages / forms. Click on the ‘Tick Me‘ option above to see it working.

/* Animate in Fields */

.form-field, .frm_submit {
	-webkit-animation: slide-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

/**
 * ----------------------------------------
 * animation slide-in-bottom
 * ----------------------------------------
 */
@-webkit-keyframes slide-in-bottom {
  0% {
    -webkit-transform: translateY(1000px);
            transform: translateY(1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slide-in-bottom {
  0% {
    -webkit-transform: translateY(1000px);
            transform: translateY(1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}

Still have questions?

Still have questions or not sure where to start? Use our quick contact to ask us a question.

Start Planning

If you’re ready to get started click here to complete our Project Planner.

You may also like…

FormidableTutorials
26 Mar 2019

Formidable Forms: File Upload Folder

Formidable Forms: Changing the File Upload Folder The Problem: You may want to change the folder that files will be…
FormidableTutorials
26 Mar 2019

Formidable Forms: Create an Invoicing system

Formidable Forms: Create an Invoicing system Here’s a guide on how to use Formidable Pro to create an invoicing system…
FormidableTutorials
26 Mar 2019

Share a form entry between users

Formidable Forms: Create a shared entry & view The Problem In some cases you may need to build a form…