如何用CSS根据HTML单选按钮标签文本设置选中后的字体颜色

数据老陈

2026-8-10

实现单选按钮选中后标签按文本变色的方案

ASP.NET的RadioButtonList会自动渲染成包含<input>单选框和<label>标签的HTML结构，基于这个结构可以轻松实现需求，以下是几种可行的方案：

方法1：通过单选按钮的Value值匹配（最可靠）

利用ListItem的Value属性对应渲染后单选按钮的value属性，精准控制颜色：

/* 保留你原有的加粗样式 */
input[type="radio"]:checked + label { 
    font-weight: bolder !important; 
}

/* 选中"Yes"（对应Value="True"）时标签变绿色 */
input[type="radio"][value="True"]:checked + label {
    color: green !important;
}

/* 选中"No"（对应Value="False"）时标签变红色 */
input[type="radio"][value="False"]:checked + label {
    color: red !important;
}

方法2：给ListItem添加自定义类（更灵活）

直接在ASP.NET代码里给每个选项指定类名，后续样式调整更方便：

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

对应的CSS代码：

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

input[type="radio"]:checked + label.no-option {
    color: red !important;
}

input[type="radio"]:checked + label.yes-option {
    color: green !important;
}