So verwenden Sie CSS, um die Schriftfarbe in HTML basierend auf dem Textinhalt des Tags zu ändern

Question

Ich habe also ein Optionsfeld mit den Texten „Ja“ und „Nein“ und wenn einer davon ausgewählt ist, möchte ich, dass sich die Schriftfarbe ändert.

• Ja (grün)
• Nein (rot)

Das Folgende ist der HTML-Code:

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

Ich habe den folgenden Code in CSS, der die Beschriftung des ausgewählten Optionsfelds ändert:

input[type="radio"]:checked + label { 字体粗细：加粗！重要； }

Answer 1

您可以使用块括号来定位任何属性，包括“Text”属性：

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>