Change Size of Checkbox on Form

Question

Hello! I am trying to change the size of the checkbox related to field Unsubscribe from all emails. The landing page can be viewed here - https://go.vituity.com/Preference-Center.html 
Ive entered the custom CSS in the form editor: 
 
.mktoForm .mktoCheckboxList {
width: 100px; !important;
height: 100px; !important;
margin-right: -5px; !important;
}
 
This has not increased the size of the checkbox. Any help would be greatly appreciated!

SanfordWhiteman · Accepted Answer

Well, first of all, your CSS doesn’t target the checkbox itself, it’s targeting one of its parent elements. So it wouldn’t be expected to change the input size.

But even fixing that wouldn’t help because the theme you chose doesn’t use the native input elements. Rather — in a move I personally hate because it breaks the Principle of Least Astonishment — it replaces the real inputs with fake checkboxes built from pseudo elements. As such you would restyle the pseudos:

.mktoForm input[type="checkbox"] + label::before, .mktoForm input[type="radio"] + label::before {
    width: 1em;
    height: 1em;
    font-size: 23px;
}

Sign up

Login with SSO

Login to the community

Login with SSO