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

Question

我正在努力为我的 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>

None 我的风格在我做这样的事情时被选中：

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

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

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

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

谢谢！

Answer 1

<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>

Answer 2

+ 选择器正在 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>

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

Custom styled radio buttons using ASP.NET MVC Helpers

html

css

html-helper

razor