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

Question

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

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

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

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

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

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

Answer 1

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

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

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

Answer 2

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

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

<label class="required">

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

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

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

.required label {
    ...
}

Answer 3

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

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

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