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

【问题标题】：Change color of selected option in a quiz在测验中更改所选选项的颜色
【发布时间】：2021-09-09 13:44:55
【问题描述】：

我是 html/css 的新手，我的测验代码有一些问题。我隐藏了单选按钮，现在我试图在选择时更改测验选项的颜色/重量（我尝试过激活、选中、选中），但似乎没有任何效果。测验是使用 Wordpress 插件创建的，因此我无法更改 html 代码（我正在回忆 css 中的元素，在页面检查器中找到它们：/）这是我使用的代码

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

这里是网站的链接 https://tinter.altervista.org/test/

提前感谢您的帮助

【问题讨论】：

看看stackoverflow.com/questions/40629160/…

标签： css wordpress colors radio-button options

【解决方案1】：

不要将 CSS 应用到 labels 本身，而是尝试将 CSS 应用到 HTML 中它们正下方的 <font> 标签。所以，在你的情况下，试试这个：

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

据我所知，您需要将 CSS 应用到每个 label 正下方的 font 标签。

如果上述方法不起作用，请尝试以下方法：

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

【讨论】：

【解决方案2】：

不起作用的原因：

你应该将:checked添加到input标签，因为它只适用于radio、checkbox和option >（选择）元素，选中或切换到开启状态。参考这个documentation。

假设 label 元素被放置在 input[type="radio"] 元素之后，您可以这样使用：

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

让我知道这是否适合你:)

【讨论】：

@Charlie 没问题，很高兴它有帮助！?