How to use CSS to change font color in HTML based on tag text content

Question

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

• Yes (green)
• No (red)

The following is the html code:

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

I have the following code in css that changes the label of the selected radio button:

input[type="radio"]:checked label { Font weight: bold! important; }

Answer 1

You can use block brackets to locate any property, including the "Text" property:

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>