Как применить CSS к внутренним элементам элемента управления ASP.NET CheckBoxList - PullRequest
Новая
       21

Как применить CSS к внутренним элементам элемента управления ASP.NET CheckBoxList

4 голосов
/ 01 сентября 2011

Мне нужно управлять атрибутами элемента label внутри элемента управления ASP.NET CheckBoxList.Каждая метка флажка должна иметь свой класс.Лучшая альтернатива, которую я вижу, - применять классы с помощью jQuery после факта.Кто-нибудь знает лучший метод?

Я нашел этот пост незначительно полезным, однако добавление атрибута к элементу списка только обертывают элемент input и элемент label вspan тег с обозначенными атрибутами.

Ответы [ 4 ]

7 голосов
/ 25 октября 2013

Вариация второго ответа Билли, но без кода на стороне сервера:

Назначить класс самому списку флажков 

<asp:CheckBoxList runat="server" id="MyCBL" CssClass="MyClass"></asp:CheckBoxList>

Любой CSS, который вы применяете к родительскому элементу (в этом случае список флажков, который отображается как таблица), может быть передан его дочерним элементам: 

<style>
    .MyClass label {color: Blue}
    .MyClass input[type='checkbox'] {background-color: Red}
</style>
1 голос
/ 11 ноября 2011

Возможно, вы уже думали об этом, но вы можете попробовать использовать управляющие адаптеры ASP.NET. Адаптеры управления позволяют изменять разметку HTML, создаваемую элементами управления ASP.NET.

Проверьте ссылки ниже для введения:

0 голосов
/ 10 ноября 2011

Итак, я вижу несколько разных способов сделать это. Первый - через классы CSS.

Код сервера: 

List<ListItem> items = new List<ListItem>();
ListItem item1 = new ListItem("test", "test");
item1.Attributes.Add("class", "specificClass1");
items.Add(item1);
//repeat the last three lines as needed
checkBoxList.Items.AddRange(items.ToArray());

Это приведет к тому, что, как вы сказали, диапазон, содержащий метку и элементы ввода. Итак, вы css будет: 

.specificClass1 label
{
    //Your specific css
}

и вы будете повторять это по мере необходимости.

Другим подходом был бы подход jQuery. Я не вижу ничего плохого в этом подходе, но в вашем вопросе вы упоминаете этот подход отрицательно. Поэтому я предполагаю, что вы знаете, как это сделать, но просто не хотите. Я просто упомянул это, чтобы сказать, что это не плохой подход, и если ничего не помогает, вы можете пересмотреть :)).

0 голосов
/ 10 ноября 2011

Это может быть своего рода хаком, так как я не разбираюсь в CSS, но у меня это сработало.

Сделайте каждый для каждого элемента списка в списке флажков, добавьте идентификаторприписать каждому.Это назначит идентификатор каждому диапазону, который обертывает тег метки.Вы захотите назначить разные идентификаторы каждому элементу списка, поскольку вы сказали, что каждому нужен свой класс. 

For Each li As ListItem In Me.CheckBoxList1.Items
    li.Attributes.Add("id", "mySpanID")
Next

Теперь вам нужно добавить стиль CSS для этого идентификатора, чтобы он применялся к метке.tag. 

<style>
    #mySpanID label { color: Blue }
</style>

Другим способом было бы сделать то же самое, что и выше, но назначить класс каждому элементу списка и применить класс только к тегу label.

Назначить класск каждому элементу списка 

For Each li As ListItem In Me.CheckBoxList1.Items
    li.Attributes.Add("class", "MyClass")
Next

А затем добавьте свой CSS 

<style>
    .MyClass label {color: Blue}
</style>
...