it-swarm.com.ru

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

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

label:input[required] {
  ...
}

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

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

26
Ted Bergeron

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

Пример:

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

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

7
Tom

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

<style>

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

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

Я не думаю, что это действительно может быть достигнуто с помощью 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');
});
0
mastaBlasta

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

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

css: label [for = "title"] { цвет синий;}

0
Cristian Oana