选中时单选按钮标签的背景颜色(使用联系人表单7)

Question

当我点击单选按钮时，我正试图更改标签的背景色。然而，我已经尝试了很多其他人尝试过的解决方案，但它似乎不适用于我的代码。

这是我的CF7:中的代码

<div class="custom-button">
<input type="radio" id="monsieur" name="radio-genre" class="genre radio" value="monsieur" />
<label id="label1" class="custom-label" for="monsieur">Monsieur</label>
<input type="radio" id="madame" name="radio-genre" class="genre radio" value="madame" />
<label id="label2" class="custom-label" for="madame">Madame</label>
</div>
[select genre "Civilité" "Monsieur" "Madame"]
[text* last-name class:champ-text placeholder "Nom*"]
[tel* phone class:champ-text placeholder "Téléphone*"]
[email* email class:champ-text placeholder "Email*"]
[response]
[submit class:envoi-devis class:particuliers "Envoyer ma demande de contact"]
</div>

我有一些CSS来设计表单的样式，但重要的是：

input[type=radio]:checked + .custom-label {
background-color: red;
}

我也试过~而不是+符号，但仍然不起作用。还尝试用onclick将JS中的一个类添加到标签中，但相同。

如果你有什么建议，我将不胜感激(很抱歉，如果我的英语犯了一些错误，这不是我的母语(

Answer 1

这不是一个答案——这只是为了说明css的工作原理。

input[type=radio]:checked + label {
background-color: red;
}

<div class="custom-button">
<input type="radio" id="monsieur" name="radio-genre" class="genre radio" value="monsieur" />
<label for="monsieur">Monsieur</label>
<input type="radio" id="madame" name="radio-genre" class="genre radio" value="madame" />
<label for="madame">Madame</label>
</div>
</div>