How to Add Transitions to Checkbox and Multiple Choice Selections

Overview

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.

Setup

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

By default, the fields will pick up the base styling.

using a little CSS you can add transition for checkbox and multiple choice

Using the CSS below you can add a small transition for checkbox and multiple choice, just copy and paste this CSS to your site. In our example, we’re targeting both the Checkbox and Multiple Choice form field IDs with -field_26 and -field_3 as well as the form ID 999.

ul#wpforms-999-field_3 li label, ul#wpforms-999-field_26 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_26 li.wpforms-selected label, ul#wpforms-999-field_26 li label:hover {
    cursor: pointer;
    border-radius: 2px;
    background-position: right top;
}
ul#wpforms-999-field_3 li input, ul#wpforms-999-field_26 li input {
    display: none;
}
ul#wpforms-999-field_3 li, ul#wpforms-999-field_26 li {
    float: left;
    width: auto;
    display: inline-block;
    padding: 10px !important;
}

Now when a user hovers or selects, you'll see the transition for the form fields

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.