Change Size of Checkbox on Form

[mnuding]

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 solution]

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

[mnuding]

That worked, thank you so much for your help!