Пользовательские стили переключателей с помощью ASP.NET MVC Helpers - PullRequest
Новая
       37

Пользовательские стили переключателей с помощью ASP.NET MVC Helpers

0 голосов
/ 06 июля 2018

Я пытаюсь стилизовать Html.RadioButtonFor() элементы формы в моем проекте ASP.NET MVC. Я пытаюсь повторить что-то вроде этого: 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;
}

но это все, я не могу получить стиль цвета фона для выбранного элемента. Какой дополнительный синтаксис я должен добавить, чтобы его можно было поднять?

Спасибо!

Ответы [ 2 ]

0 голосов
/ 06 июля 2018

Селектор + ищет метку сразу после радиостанции 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>
0 голосов
/ 06 июля 2018 
<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>
...