How to Apply Images to Checkbox Labels Using CSS

Overview

Would you like to apply images to checkbox labels in your forms? This can be easily done with CSS and we’re going to show you a couple of different ways to use this CSS.

By default, all form labels will only display the text that you have inside the form builder.

by default, only text will appear in checkbox labels

Creating the form

First, you’ll need to create your form and add your Checkbox form field.

create your form and add at least one checkbox field

If you need any assistance in creating your form, please review this documentation.

Adding the CSS

For the purpose of this documentation, we’re going to show you a couple of different methods on how how to do this. One option will be with a background image uploaded to your WordPress library. The other option will be using a font-based icon.

Both scenarios will require you to take the CSS and add it to your site. If you’re not sure how to add CSS to your site, please check out this tutorial.

Using a background-image

If you want to add a background image to the labels of the Checkbox form field, use the following CSS.

ul#wpforms-583-field_3 li.choice-1 label:before {
    content: "";
    display: inline-block;
    background-image: url(http://yoursite.com/wp-content/uploads/2019/10/your-image-filename.png);
    background-size: 100%;
    height: 45px;
    width: 30px;
    background-repeat: no-repeat;
    position: relative;
    right: 5px;
    top: 20px;
}

ul#wpforms-583-field_3 li.choice-2 label:before {
    content: "";
    display: inline-block;
    background-image: url(http://yoursite.com/wp-content/uploads/2019/10/your-image-filename.png);
    background-size: 100%;
    height: 45px;
    width: 30px;
    background-repeat: no-repeat;
    position: relative;
    right: 5px;
    top: 20px;
}

ul#wpforms-583-field_3 li.choice-3 label:before {
    content: "";
    display: inline-block;
    background-image: url(http://yoursite.com/wp-content/uploads/2019/10/your-image-filename.png);
    background-size: 100%;
    height: 45px;
    width: 30px;
    background-repeat: no-repeat;
    position: relative;
    right: 5px;
    top: 20px;
}

ul#wpforms-583-field_3 li.choice-4 label:before {
    content: "";
    display: inline-block;
    background-image: url(http://yoursite.com/wp-content/uploads/2019/10/your-image-filename.png);
    background-size: 100%;
    height: 45px;
    width: 30px;
    background-repeat: no-repeat;
    position: relative;
    right: 5px;
    top: 20px;
}

ul#wpforms-583-field_3 li.choice-5 label:before {
    content: "";
    display: inline-block;
    background-image: url(http://yoursite.com/wp-content/uploads/2019/10/your-image-filename.png);
    background-size: 100%;
    height: 45px;
    width: 30px;
    background-repeat: no-repeat;
    position: relative;
    right: 5px;
    top: 20px;
}

In the above CSS, the wfporms-583 will only be applied to the form with the form ID 583.

As with the form ID, you’ll also have to update your field ID. The field ID for our form is 3.

If you’re not sure how to find your form ID, please review this tutorial.

Each option listed in the Checkbox field has a number associated with it. So when you’re styling each label, the first item of the field will always be .choice-1. The next would be .choice-2 and so on.

Since we have 5 options listed on our Checkbox form field, our CSS will be repeated 5 times starting with .choice-1 and ending on .choice-5.

with this CSS you can apply images to checkbox labels

Please remember that in the CSS above, you’ll need to change the background-image: url(http://yoursite.com/wp-content/uploads/2019/10/your-image-filename.png); to match the URL to the image you want to use for each option. Also, this CSS is based on a transparent .png file uploaded at the size of 400px x 400px. Depending on your image size, the CSS will need to be adjusted to accommodate the size.

Using a font-based icon

You can also use images to checkbox labels by using a font based icon font-family.

Just as with the previous CSS, we’re targeting the form ID of 583 and the field ID of 3. In the CSS below you’ll see the -583-which refers to the form ID. However, for this example, we’re not going to apply a different image to each choice, we’re going to use the same icon for all 5. So our CSS will look a little different.

ul#wpforms-583-field_3 li.choice-1 label:before,
ul#wpforms-583-field_3 li.choice-2 label:before,
ul#wpforms-583-field_3 li.choice-3 label:before,
ul#wpforms-583-field_3 li.choice-4 label:before,
ul#wpforms-583-field_3 li.choice-5 label:before {
    font-family: dashicons;
    content: "\f173";
    display: inline-block;
    color: #000000;
    font-size: 16px;
    margin: 0px 5px;
    position: relative;
    top: 2px;
}

Using CSS we're adding an font based icon image to the checkbox label

And that’s it! You’ve successfully added an image to your Checkbox labels. Would you also like to customize the look of the Rating icons? Take a look at our tutorial on How to Customize the Look of the Rating Icons.