How to Add Transitions to Checkbox and Multiple Choice Selections

Introduction

Would you like to add some transitions to your Checkbox and Multiple Choice form fields when they are selected? Adding a small touch of CSS to achieve this can easily provide that little bit of uniqueness to your forms. In this tutorial, we’ll walk you through the CSS needed to add transitions to your Checkbox and Multiple Choice form field selections.

Creating the form

First, you’ll need to create your form and set up your Checkbox and/or Multiple Choice form fields.

If you need any help with this step, please review this documentation.

create your new form and add your checkbox and multiple choice fields

Adding the CSS

Now it’s time to add the CSS to your site. If you’re not sure how or where to add CSS to your site, please review this tutorial.

ul#wpforms-999-field_3 li label, 
ul#wpforms-999-field_27 li label {
    padding: 10px;
    transition: all ease 0.3s;
    background: linear-gradient(to right, #e27730 50%, #cd631d 50%);
    background-size: 200% 100%;
    background-position: left bottom;
    color: white;
}
ul#wpforms-999-field_3 li.wpforms-selected label, 
ul#wpforms-999-field_3 li label:hover, 
ul#wpforms-999-field_27 li.wpforms-selected label, 
ul#wpforms-999-field_27 li label:hover {
    cursor: pointer;
    border-radius: 2px;
    background-position: right top;
}
ul#wpforms-999-field_3 li input, ul#wpforms-999-field_27 li input {
    display: none;
}
ul#wpforms-999-field_3 li, 
ul#wpforms-999-field_27 li {
    float: left;
    width: auto;
    display: inline-block;
    padding: 10px !important;
}

after the css is added you can now see CSS transition checkbox and multiple choice

The above CSS will be applied only to the form ID 999. This will need to be changed to match your own form ID. The field IDs of field_27 and field_3 will also need updated to match the field IDs for your Checkbox and Multiple Choice fields in your form.

Each Checkbox and Multiple Choice field has it’s own ID so if you have more than two in your form, you would just duplicate the CSS, change the field ID number and separate each one with a comma.

If you need to find your form or field IDs, please see this tutorial.

To learn more about CSS transitions, you can take a look at this documentation.

And that’s it, you’ve successfully added the CSS to create a transition for Checkbox and Multiple Choice to your form.

Would you like to add some CSS that will make the text form fields pop off the page when the visitor is typing inside them? Check out our tutorial on How to Add CSS to the Form Field Focus.