使用 ASP.NET MVC Helpers 自定义样式的单选按钮答案

【问题标题】：Custom styled radio buttons using ASP.NET MVC Helpers使用 ASP.NET MVC Helpers 自定义样式的单选按钮
【发布时间】：2018-07-06 03:48:04
【问题描述】：

我正在努力在我的 ASP.NET MVC 项目中设置 Html.RadioButtonFor() 表单元素的样式。我正在尝试复制这样的内容：http://jsfiddle.net/YB8UW/2374/

但是我的 HTML 表单部分看起来像这样：

<div class="form-group">
    <label>@Html.RadioButtonFor(m => m.Presave.IsTrack, true) Track</label>
    <label>@Html.RadioButtonFor(m => m.Presave.IsTrack, false) Album</label>
</div>

当我执行以下操作时，我的任何样式都不会被拾取：

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

我的项目中标签轮廓（取自小提琴）的 css 工作正常

label {
    padding: 5px;
    border: 1px solid #CCC;
    cursor: pointer;
    z-index: 90;
}

仅此而已，我无法获取所选元素的背景颜色样式。我必须添加什么额外的语法才能被拾取？

谢谢！

【问题讨论】：

标签： html css razor html-helper

【解决方案1】：

+ 选择器正在寻找checked 单选之后的标签以及以下内容：

<div class="form-group">
    <label>@Html.RadioButtonFor(m => m.Presave.IsTrack, true) Track</label>
    <label>@Html.RadioButtonFor(m => m.Presave.IsTrack, false) Album</label>
</div>

将生成标签内的单选按钮，例如

<div class="form-group">
    <label><input type="radio" />...</label>
    <label><input type="radio" />...</label>
</div>

将标签放在@RadioButtonFor 之后应该可以解决问题：

<div class="form-group">
    @Html.RadioButtonFor(m => m.Presave.IsTrack, true, new { id = "track" })
    <label for="track">Track</label>
    @Html.RadioButtonFor(m => m.Presave.IsTrack, false, new { id = "album" }) 
    <label for="album">Album</label>
</div>

【讨论】：

太接近了！所以现在样式可以工作了，但是由于标签现在与单选按钮分离，如果您单击标签文本，它不会选择单选按钮:(
好的，所以我通过向 RadioButtonFor 添加一个 id 并使用与标签上的 for 标记相同的 id 来解决此问题。现在它按预期工作，如果您将其添加到您的答案中，我将标记为正确！ @StaticBeagle
@JordanLewallen 不错！我已将 ID 添加到 RadioButtonFor's。
@JordanLewallen 你打赌。很高兴我能帮上忙！

【解决方案2】：

<div class="form-group">
    <label>@Html.RadioButtonFor(m => m.Presave.IsTrack, true,new { @class = "hello" }) Track</label>
    <label>@Html.RadioButtonFor(m => m.Presave.IsTrack, false, new { @class = "hello" }) Album</label>
</div>

【讨论】：

添加一个类对单选按钮输入的 :checked 属性没有帮助 ???