How to Apply Images to Checkbox Labels Using CSS

Overview

Would you like to apply an image to your Checkbox labels? If you don’t want to apply image choices but want a small image in front of your Checkbox labels, you can easily do that using CSS. In this tutorial, we’ll show you two examples of how to use CSS to add images in front of your Checkbox labels.

Implementation Options

There are two different ways to apply this CSS. Using a background-image or using a font-based icon. Please see below the two different implementation options and add the CSS to your site.

Using a background-image

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

The CSS below is targeting the form ID 583.

For the fields such as .choice-1, .choice-2, .choice-3 is the CSS needed for how ever many choices you have in your Checkbox form field. So you’d want to add CSS for as many options as you have and just remember to increment the number for each option.

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

With the above CSS you can add a background image to your 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.

Also remember to also change the -583-field_3 to match the form ID and field ID of your form.

Using a font-based icon

If you’re already including a font family that supports icons, you can easily use this CSS to add an icon in front of these labels.

In the CSS below you’ll see the -583-which refers to the form ID. Also, the -field_3 refers to the field ID number. Just remember to change the -583-field_3 to match the form ID and field ID of your form.

The .choice-1, .choice-2, .choice-3 just represents how many choices you have in your Checkbox. So you’d want to add CSS for as many options as you have and just remember to change the number.

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

Using CSS we're adding an 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.