Cara menggunakan CSS untuk menukar warna fon dalam HTML berdasarkan kandungan teks teg

Question

Jadi saya mempunyai butang radio dengan teks "Ya" dan "Tidak" dan jika salah satu daripadanya dipilih, saya mahu warna fon ditukar.

• Ya (hijau)
• Tiada (merah)

Berikut ialah kod html:

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

Saya mempunyai kod berikut dalam css yang menukar label butang radio yang dipilih:

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

Answer 1

Anda boleh menggunakan kurungan blok untuk menyasarkan mana-mana harta, termasuk sifat "Teks":

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>