how to change font color based on label text content in html using css-CodePudding

So I have a radio button with the text "Yes" and "No" and I want the font color to change if either is selected.

Yes (Green)
No (Red)

Below is the code in html

<asp:RadioButtonList ID="RadioButtonList1" runat="server" RepeatDirection="Horizontal">
  <asp:ListItem Text="No" Value="False" />
  <asp:ListItem Text="Yes" Value="True" />
</asp:RadioButtonList>

I have the code below in css that changes the selected radio button's label

input[type="radio"]:checked label { font-weight: bolder !important; }

CodePudding user response：

You can use the block brackets to target any attribute incl. a "Text" Attribute:

input[text="Yes"]:checked   label {
  color: green;
}

input[text="No"]:checked   label {
  color: red;
}

<input type="radio" text="Yes" name="select" id="yes">
<label for="yes">Yes</label>
<input type="radio" text="No" name="select" id="no">
<label for="no">No</label>