How to Apply Images to Checkbox Labels Using CSS

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.

Following the instructions in the article, it’s easy enough to use images as well as text for your Checkbox form field labels using an image or even font-based icons.

Creating the form

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

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

Applying images to the checkbox labels

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.

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

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.

FAQ

Q: Can I use this CSS for the Multiple Choice form field?

A: Absolutely! These same CSS classes are used for the Multiple Choice form field as well. Just remember to update the form and field IDs in your CSS.

Q: Why doesn’t this appear to be working for my form?

A: Please make sure that you have updated the CSS to use your own form and field IDs. Once you’ve confirmed this and your image isn’t showing, please be sure to check the URL for the image you’re attempting to add in your CSS.

For assistance on finding your form and field IDs, please check out this helpful documentation.

Q: Can I use this for the Dropdown field?

A: At this time, this CSS will only work correctly with the following fields:

• Checkbox
• Multiple Choice
• Payment Checkbox
• Payment Multiple Choice

This is mostly due to the way modern browsers render dropdown fields and the HTML markup.