将样式应用于ASP.NET RadioButtonList

Question

我试图在ASP.NET中设置RadioButtonList的样式，如下所示：

这可以在FlatUI link

找到

我注意到FlatUI单选按钮的格式如下：

但是当我给RadioButtonList一个类时，我没有获得所需的输出。 我的标记就是这个

<div class="col-lg-12">
     <div class="col-lg-5">
                        <asp:RadioButtonList ID="WTRBTNList" OnSelectedIndexChanged="WTRBTNList_SelectedIndexChanged"
                            AutoPostBack="true" runat="server" CssClass="radio">
                            <asp:ListItem  Text="Pending Tests" Value="Pending" Selected="True"></asp:ListItem>
                            <asp:ListItem Text="Approved Tests" Value="Approved"></asp:ListItem>
                            <asp:ListItem Text="Rejected Tests" Value="Rejected"></asp:ListItem>
                        </asp:RadioButtonList>
                    </div>
         <div class="col-lg-7">
     </div>
 </div>

有人可以指导我朝正确的方向前进吗？我在这里缺少什么？

Answer 1

正如评论中所建议的那样，你应该抛弃糟糕的.NET <asp>标签以获取输入并使用本机代码，尤其是对于广播和复选框列表。

<div class="col-lg-12">
    <div class="col-lg-5">
         <input type="radio" name="tests" value="Pending"<%If Reqeust.Form("tests") = "Pending" Then%> checked="checked"<%End If%> /><label>Pending</label>
         <input type="radio" name="tests" value="Pending"<%If Reqeust.Form("tests") = "Approved" Then%> checked="checked"<%End If%> /><label>Approved</label>
         <input type="radio" name="tests" value="Pending"<%If Reqeust.Form("tests") = "Rejected" Then%> checked="checked"<%End If%> /><label>Rejected</label>
     </div>
</div>

然后，如果您想在单击广播时保留表单发布，请使用以下jQuery：

$('input[type="radio"]).on('change', function() {
    $(this).closest('form').submit();
});

然后，如果要设置单选按钮的样式，可以阅读使用:checked伪选择器的helpful article：

input[type="radio"]:checked + label { }