Custom CSS checkboxes and radio buttons in Webflow

A simple way to style checkboxes and radio buttons in Webflow with only CSS. Makes use of the "checked + label" class to keep the native checkbox/radio button functionality intact. Works in IE 9 and 10 (!!!)

Quick intro to explain what'll be happening.

Checkbox and radio button inputs are made up of two components: the button and the label:

Checkbox and radio button inputs are made up of two components: the button and the label. We'll be doing two things to make this work:
1. hiding the button part of the input with display: none
2. Styling the label part with our own CSS

Let's make checkboxes!

Step 1: Hide the Button

Note: We'll just play with the checkbox, but the same exact procedure is used for radio buttons.
In the 'Navigator' panel in Webflow, find the checkbox you want to style. Inside there will be the button and the label. Select the button part.

Create a class called "display none" and apply it to the button. Make one change in the attributes: change display setting from "block" to "none". This will hide you button from the world. Luckily for us, the label still acts as a target to make the button work.

Result:

Step 2: Style the label

1. Let's give our checkbox a custom (fake) button by adding a background-image of an empty checkbox. Select the label part of the checkbox:

2. Next, create a unique style for your global checkbox. I'll use "sexy-checkbox".

3. Add a background image of your empty checkbox, and position it to the center-left.

4. Tweak the positioning of the label, font size, colours etc. to your liking.

The result will now look like this, and is the basis for our new global checkbox:

Publish your site to see the changes live in the browser!

Step 3: Write some custom code to style the "checked" state

1. We'll jump over the the global CSS override to write our code. Hit the W in the top-left corner and go to "Site Settings"

2. Copy/paste the following into the Custom Code section of the site settings. This code will override ALL checkboxes on your site that you add the "sexy-checkbox" class to.

/* Global checkbox */
input[type="checkbox"]:checked + label {
  background-image: url("your-checked-background-image-url-here");
}

3. We'll now override your custom unchecked button background-image with a new checked one. Front your assets panel, find your image and click to bring up the options. Once open, right-click on the tiny box with arrow and hit 'copy link' form the options. This will copy Webflow's URL for that button to your clipboard. (alternatively, click the icon to open the image in your browser and copy the URL).

4. Paste the image URL into the background-image override in your custom code. This will change the background image on your global checkbox style when it's clicked.
Remember to save your changes with the big green button!

Your job is done!

LEt's make an alternate checkbox!

See the ".checklist-alt" style attached directly to the "+ label" code? That'll give your checkbox a different style when you add a new class "checklist-alt" to your "sexy-checkbox" class.

/* Alternate checkbox button */
input[type="checkbox"]:checked + label.checklist-alt {
  background-image: url("your-alternate-checked-background-image-url-here"); }
}

Boom!

Wait, what about radio buttons?

Radio button code :)

All the steps are the same for a radio buttons except the custom code, which looks like this:

/* Global radio button */
input[type="radio"]:checked + label {
  background-image: url("your-checked-background-image-url-here");
}

Look at these radio buttons!

Super-custom Radio Buttons? Yes. We. Can.

/* Super custom RSVP radio buttons */

input[type="radio"]:checked + label.rsvp-yes-bg {    /* added combo-style for bg to be green */
      color: #fff;
     background-color: #57ba6e;
    background-image: none;
}

  input[type="radio"]:checked + label.rsvp-no-bg {     /* added combo-style for bg to be blue */
      color: #fff;
      background-color: #152b4d;
      background-image: none;
}

Click these bad boys:

A fix for the grey flicker when tapping on mobile

Source: https://css-tricks.com/snippets/css/remove-gray-highlight-when-tapping-links-in-mobile-safari

/* Remove tap highlight on iOS */

a {
   -webkit-tap-highlight-color: rgba(0,0,0,0);
  }

Read through the comments on the above-linked page as there are a few tweaks depending on what form elements you want to remove the flicker from.

"You should also remember to add the same rule to buttons and form controls as they also have the highlight." Source

/* Remove tap highlight on iOS form controls */

input, textarea, button, select, a {  
   -webkit-tap-highlight-color: rgba(0,0,0,0);
   }