How to Add Transitions to Checkbox and Multiple Choice Selections

Interested in enhancing your Checkbox and Multiple Choice form fields with smooth transitions when they are selected? With just a bit of CSS, you can add a touch of uniqueness to your forms. In this guide, we’ll show you the CSS required to implement transitions for 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 as well as any other fields needed.

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

Adding the transitions

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

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.

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.