使用CSS根據標籤文字內容在HTML中改變字體顏色的方法

Question

所以我有一個單選按鈕，文字為“是”和“否”，如果選擇其中任何一個，我希望字體顏色會改變。

• 是（綠色）
• 否（紅色）

以下是html程式碼：

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

我在css中有以下程式碼，可以改變所選單選按鈕的標籤：

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>