LearnDash/Elementor multilple answer quiz CSS

Hi there,

GP doesn't actually apply any styling to an input checkbox - you could try this CSS to increase their size:

input[type='checkbox'] {
    font-size: 2em;
    transform: scale(2);
}

Thanks for your reply David.

I tried the code but I couldn't see any change so I increased the scale to 5 and here's what I got. It looks like every checkbox has a different styling.

When the quiz is displayed in a single column, everything's fine though.

I don't have this problem with Twenty Twenty so it must come from GP.

Would you be able to switch to Twenty Seventeen so i can see what it is doing differently ?

I checked and there's the same problem with Twenty Seventeen.

Ok so Twenty Twenty is doing something - could you switch to Twenty Twenty and let me take a look ?

Sure!
It's done.

OK - so Twenty Twenty is actually placing its own very specific styling over the default browser inputs.
The fact that its also broken on Twenty Seventeen says that LearnDash should address the issue, but in the meantime if you switch back to GP i'll see if we can come up with a fix :)

Ok, I'll let them know. But they aren't as reactive as you guys (unfortunately). Anyway, I switched back to GP.

Try this CSS:

input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    min-width: 24px;
    height: 24px;
    background: #fff;
    border-radius: 0;
    border-style: solid;
    border-width: 0.1rem;
    border-color: #dcd7ca;
    cursor: pointer;
}

input[type="checkbox"]:checked::before {
    content: '\2713';
    position: absolute;
    display: inline-block;
    font-size: 24px;
    line-height: 1;
}

Perfect!

Thanks for your help, David!

Awesome - glad to be of help