SOLVED

Change Size of Checkbox on Form

Go to solution
mnuding
Level 1

Change Size of Checkbox on Form

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!

1 ACCEPTED SOLUTION

Accepted Solutions
SanfordWhiteman
Level 10 - Community Moderator

Re: Change Size of Checkbox on Form

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

 

View solution in original post

2 REPLIES 2
SanfordWhiteman
Level 10 - Community Moderator

Re: Change Size of Checkbox on Form

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
Level 1

Re: Change Size of Checkbox on Form

That worked, thank you so much for your help!