[Resolved] LearnDash/Elementor multilple answer quiz CSS

Home Forums Support LearnDash/Elementor multilple answer quiz CSS

This topic contains 11 replies, has 2 voices, and was last updated by  David 2 months, 2 weeks ago.

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
  • #1192200



    I’m using LearnDash and Elementor and I have a problem with the way answers for multiple-answer quiz are displayed: the checkboxes are so small that users can’t see which ones are selected.


    I’ve had this issue since I updated LearnDash but after some testing, it turns out it’s a theme conflict.

    Any ideas on how I could fix it?



    David Customer Support

    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.


    David Customer Support

    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.


    David Customer Support

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



    It’s done.


    David Customer Support

    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.


    David Customer Support

    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;



    Thanks for your help, David!


    David Customer Support

    Awesome – glad to be of help

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.