在测验中更改所选选项的颜色

Question

I'm new at html/css and I'm having some problems with my code for a quiz. I hid radio buttons and now I'm trying to change the color/weight of quiz options when selected (I've tried with active, checked, selected) but nothing seems to work. The quiz has been created with a Wordpress plugin so i can't change html code (i'm recalling elements in css finding them in the page inspector :/ ) This is the code i used

CSS

 label[for=question1_1]:active, label[for=question1_2]:active, label[for=question1_3]:active, label[for=question1_4]:active { color:#ED407B; font-weight:600; }

Here the link of the website https://tinter.altervista.org/test/

Thanks in advance for help

Answer 1

Instead of applying the CSS to the label s themselves, try applying the CSS to the <font> tags just below them in the HTML. So, in your case, try this instead:

    label[for=question1_1] > font,
    label[for=question1_2] > font,
    label[for=question1_3] > font,
    label[for=question1_4] > font {
        color:#ED407B;
        font-weight:600;
    }

As far as I can see, it is the font tag directly below each label that you need to apply the CSS to.

If the above doesn't work, try this instead:

    label[for=question1_1] font,
    label[for=question1_2] font,
    label[for=question1_3] font,
    label[for=question1_4] font {
        color:#ED407B;
        font-weight:600;
    }

Answer 2

The reason why it does not work:

You should add :checked to input tag, since it only works for radio , checkbox and option (select) element that is checked or toggled to an on state. Refer to this documentation .

Assuming label element is placed right after input[type="radio"] element, you can use this:

input[type="radio"]:checked + label {
    color:#ED407B;
    font-weight:600;
}

Let me know if this works for you :)