Селектор CSS для метки, привязанной к вводу

Есть ли способ в CSS выбрать label, привязанный к полям input (через атрибут for) с набором атрибутов required? Что-то вроде:

label:input[required] {
  ...
}

В настоящее время я добавляю class="required" к меткам и входам для стилизации. Теперь у меня есть атрибут HTML5 required="required" в необходимых полях ввода. Было бы неплохо удалить избыточные атрибуты класса.

ближайший ответ, который я нашел, не использует атрибут label element for, но требует, чтобы label был непосредственно смежным с входом в HTML.

Ответы

Ответ 1

Как насчет CSS 2 Атрибуты выбора Это довольно совместимо с браузерами.

Пример:

<style>
label[required=required]
{
color: blue;
}
</style>
<label required="required" for="one">Label:</label><input name="one" id="one" />

Также проверьте этот вне.

Ответ 2

Это решение работает в большинстве современных браузеров:

<style>

label > input[required="required"] {
    background: red; 
}

</style>
<label for="myField"><input required="required" id="myField" /></label>

Ответ 3

Я не думаю, что это действительно может быть выполнено через CSS так, как хочет OP. CSS просто не работает таким образом.

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

Вы можете создать такую ​​структуру, как

<form>
     <ul class="required_fields">
       <li>
          <label>username</label>
          <input />
       </li>
       <li>
          <label>email</label>
          <input />
       </li>
     </ul
     <ul class="optional_fields">
          ...
     </ul>
 </form>

/* CSS */
.required_fields label {font-weight: bold} 
.required_fields label:after { content: "*"; color: red } /*more styles for labels*/

Для такого подхода существует ряд преимуществ. Вы можете легко добавлять и удалять элементы из "требуемой" группы, не изменяя каждый отдельно. Вы можете назначить "необходимый" класс так высоко, как хотите. Если форма имела "обязательный" класс, тогда все в ней было бы помечено как необходимо. Есть меньше мест для внесения изменений, если вы решили, что "требуемый" класс следует назвать чем-то другим. И вообще этот подход помогает вам лучше организовать ваши формы. Вы не должны смешивать обязательные и необязательные поля.

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

$(".required_fields input").each(function(){
   this.setAttribute('required', 'required');
});