Использование CSS для стилизации меток, указывающих на элементы с определенным атрибутом

Я использую ненавязчивую проверку в приложении ASP.Net MVC3. Я хотел бы определенным образом оформить элементы ярлыка, связанные с обязательными элементами.

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

Теперь я считаю, что можно было бы стилизовать сами элементы только с помощью CSS, используя правило CSS, чей селектор применяется ко всем элементам с атрибутом [data-val-required]. Это будет выглядеть примерно так:

input[data-val-required] { color: red; }

Но можно ли стилизовать этикетки? Чтобы сказать (с помощью селектора CSS), что правило CSS применяется ко всем элементам ярлыка, чей атрибут for указывает на элемент input с атрибутом [data-val-required]?

В настоящее время я применяю стиль с небольшим количеством jQuery, и он работает хорошо. Но было бы еще лучше, если бы я мог просто установить правило CSS и покончить с этим.


css unobtrusive-validation
person Ann L.    schedule 16.12.2011    source источник
comment
как выглядит ваш селектор jquery?   -  person Bassam Mehanni    schedule 17.12.2011
comment
конечно, можно стилизовать ярлыки, но вам придется показать нам некоторый код...   -  person ptriek    schedule 17.12.2011
comment
@BassamMehanni В моем jQuery используется более одного селектора: я просматриваю метки с атрибутом for, извлекаю элемент, на который ссылается for, и проверяю его на [data-val- обязательный].   -  person Ann L.    schedule 19.12.2011
comment
@ptriek Будьте счастливы; вы хотите увидеть HTML или CSS?   -  person Ann L.    schedule 19.12.2011
comment
желательно и то, и другое - и jQuery тоже. Если бы вы могли настроить урезанную версию на jsfiddle.com - это был бы самый простой способ дать вам ответ...   -  person ptriek    schedule 19.12.2011
comment
Возможный дубликат индикатора обязательного поля ASP.NET MVC   -  person Divi    schedule 18.05.2017
comment
@ Диви, я не согласен. Я изменил вопрос, чтобы уточнить, чем он отличается от другого вопроса.   -  person Ann L.    schedule 18.05.2017

Ответы (3)


arrow_upward
1
arrow_downward

Вы не можете добраться туда отсюда. Как говорит @vlgalik, единственными параметрами CSS являются селекторы, которые 1) не поддерживаются в некоторых браузерах и 2) имеют ограниченную способность находить другие элементы, что вынуждает вас создавать свою разметку в соответствии с ними.

Итак, ваше текущее решение - использовать JQuery для поиска меток и соответствующих им входных данных - ваш лучший выбор.

Однако я бы подошел к вашему решению jQuery в противоположном направлении: сначала найдите все входные данные, соответствующие input[data-val-required], и для каждого из них получите его идентификатор, затем выберите соответствующую метку: label[for="<id-from-input>"] - похоже, это будет меньше работы. Но это оптимизация; если у вас не так много меток и полей ввода на странице, любое направление будет работать нормально.

person Val    schedule 19.12.2011

arrow_upward
1
arrow_downward

В этом примере jsfiddle используются селекторы CSS3, но есть недостаток, заключающийся в том, что метка должна следовать после элемента ввода в HTML. (можно разместить перед использованием добавления CSS, как в примере).

Гораздо проще и эффективнее было бы указать атрибут класса элемента метки, например:

<label class="required">

или поместить входную пару меток в элемент div:

<div class="required">
  <label for="input1">Label 1</label>
  <input id="input1" ... />
</div>

и примените желаемый стиль CSS, просто используя:

.required label {
    ...
}
person vlgalik    schedule 17.12.2011
comment
Я понимаю, что вы имеете в виду, говоря, что это проще. Однако то, на что я надеялся, было решением, основанным (в конечном счете) на автоматически сгенерированном атрибуте data-val-required и не требующем от меня, программиста, делать что-либо по-другому между обязательными и необязательными полями. Отсюда моя надежда на стиль CSS. (Кроме того, некоторые поля требуются только в том случае, если некоторые другие поля содержат другие значения, поэтому мне нужно будет удалить или добавить стили или элементы. Стиль CSS будет автоматически адаптироваться, если атрибуты элемента изменятся). - person Ann L.; 19.12.2011

arrow_upward
0
arrow_downward

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

input[for=data-val-required]{}

Этот селектор основан на атрибутах данного тега. Это должно дать вам то, что вы ищете.

person Matthew Green    schedule 19.12.2011