How to Customize Checkbox and Radio Fields to Look Like Buttons

Overview

Would you like to customize the Checkbox and Radio form fields to look like buttons? You could even style the buttons to have the color you need to match your company branding. In this tutorial, we’ll show you how to use CSS to customize these form fields.

Setup

By default, Checkbox form fields appear with a box in front of the label to be checked. Radio form fields also have the same default form styling.

By default, each browser will style radio and checkbox inputs

Using a little CSS you can transform these two form fields to have their options appear like buttons so the user will see the options transform on hover as well as when the option is checked.

Copy the CSS shown below to your site and please remember to change the form#wpforms-form-612 to match the form ID of your form.

.wpforms-container form#wpforms-form-612 input[type=radio], .wpforms-container form#wpforms-form-612 input[type=checkbox] {
    display:none; 
    margin:10px;
}


.wpforms-container form#wpforms-form-612 input[type=radio] + label, .wpforms-container form#wpforms-form-612 input[type=checkbox] + label {
    display: inline-block;
    padding: 5px;
    background-color: #e7e7e7;
    border-color: #ddd;
    transition: all 0.3s ease-in-out;
}

form#wpforms-form-612 input[type=radio]:checked + label, form#wpforms-form-612 input[type=checkbox]:checked + label, form#wpforms-form-612 input[type=radio]:checked + label, .wpforms-container form#wpforms-form-612 input[type=radio] + label:hover, .wpforms-container form#wpforms-form-612 input[type=checkbox] + label:hover {
    background-image: none;
    background-color: #d0d0d0;
    cursor: pointer;
}

.wpforms-container form#wpforms-form-612 ul li {
    display: inline-block;
    margin: 5px;
    border-radius: 3px;
    line-height: 1.4em;
}

Alternatively, you can use the CSS shown below to target all Checkbox and Radio fields for all forms.

.wpforms-container input[type=radio], .wpforms-container input[type=checkbox] {
    display:none; 
    margin:10px;
}


.wpforms-container input[type=radio] + label, .wpforms-container input[type=checkbox] + label {
    display: inline-block;
    padding: 5px !important;
    background-color: #e7e7e7 !important;
    border-color: #ddd !important;
    transition: all 0.3s ease-in-out !important;
}

.wpforms-container input[type=radio]:checked + label, .wpforms-container input[type=checkbox]:checked + label, .wpforms-container input[type=radio]:checked + label, .wpforms-container input[type=radio] + label:hover, .wpforms-container input[type=checkbox] + label:hover {
    background-image: none !important;
    background-color: #d0d0d0 !important;
    cursor: pointer !important;
}

.wpforms-container ul li {
    display: inline-block;
    margin: 5px !important;
    border-radius: 3px !important;
    line-height: 1.4em !important;
}

Using CSS you can customize checkbox and radio fields to look like buttons

Any of the CSS shown above with reference to -color will just need to be updated to match the colors of your company branding.

And that’s all you need to customize the Checkbox and Radio fields. Would you like to also customize the Numbers field? Take a look at our tutorial on How to Remove the Arrows on the Numbers Field.