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

Question

我是 html/css 的新人，我的测验代码有一些问题。我隐藏了单选按钮，现在我试图在选择时更改 color/weight 测验选项（我尝试过激活、选中、选中）但似乎没有任何效果。测验是使用 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;
}

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

在此先感谢您的帮助

Answer 1

与其将 CSS 应用于 label 本身，不如尝试将 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;
    }

Answer 2

不起作用的原因：

您应该将 :checked 添加到 input 标签，因为它仅适用于 radio、checkbox 和 option (select) checked 或 toggled 元素到一个状态。参考这个documentation.

假设 label 元素 紧跟在 input[type="radio"] 之后元素，你可以使用这个：

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

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

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

Change color of selected option in a quiz

css

wordpress

colors

options

radio-button