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

Question

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

label:input[required] {
  ...
}

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

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

Answer 1

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

Пример:

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

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

Answer 2

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

<style>

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

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

Answer 3

вы можете использовать label[for="title"], где "title" - это идентификатор вашего ввода. Пример:

<label for="title">Title</label>
<input type="text" id="title" name="title">

CSS:

label[for="title"] {
  color: blue;
}

Answer 4

Я не думаю, что это действительно может быть достигнуто с помощью CSS так, как этого хочет ОП. 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*/

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

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

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