Как стилизовать родительский элемент, если input disabled?

Question

[Дмитрий]

<label>
    <input disabled>
</label>

Есть label, в нём input, нужно его стилизовать только в том случае, если он будет disabled.

Comments

[Semantic.Moscow]

разве инпут может быть в лейбле?

[Semantic.Moscow]

получить коллекцию объектов input
и проверить атрибут disabled

[Дмитрий]

Semantic.Moscow, Есть какой-то пример?

[Semantic.Moscow]

Дмитрий, коллекция элементов по https://developer.mozilla.org/en-US/docs/Web/API/D...

получение атрибутов по https://developer.mozilla.org/en-US/docs/Web/API/E...

[RAX7]

На css ни никак. Если поменять структуру на такую:

<input disabled id="inp">
<label for="inp">label</label>

то можно сделать так:

input[disabled] + label {
  color: gray;
}

[cssfish]

Semantic.Moscow, что мешает инпуту быть в лейбле???

[Semantic.Moscow]

cssfish, ну, формально, ничего не мешает.

но есть же здравый смысл, семантика.

клик по инпуту вызывает фокус на инпуте? какая-то рекурсия получается.

[cssfish]

Semantic.Moscow, все логично, клик по Label призван переносить фокус в инпут. он ровно это и делает.

[Semantic.Moscow]

cssfish, а клик будет по лэйблу или по инпуту? :D

[cssfish]

Semantic.Moscow, это уже браузер пусть решает ) с точки зрения верстки это работает и ок )

[Semantic.Moscow]

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

[cssfish]

Semantic.Moscow, ну и какие? на данном приеме например стилизация чекбоксов хорошо происходит. Про проблемы было бы интересно - не сталкивался

[Semantic.Moscow]

cssfish, нуу, как минимум попытка описать оформление лейбла приведёт к тому, что инпут унаследует часть его свойств и их (вероятность велика) придётся переопределять.

попытка через DOM заменить/дополнить содержимое лейбла затронет и инпут

[Одиночка Айс]

Semantic.Moscow, будет клик по label в первую очередь

[Semantic.Moscow]

Одиночка Айс, во! а если я захочу отловить клик по инпуту, то начинаются приключения.

[Одиночка Айс]

Semantic.Moscow, а если я захочу чтобы клик запускал ракету на луну, во проблем то)

[cssfish]

Semantic.Moscow, ясно, расходимся )

[Semantic.Moscow]

Одиночка Айс, ирония тут уместна ровно до тех пор, пока вы верстаете хомячок на WP

как только задача приобретает вид типа: контент + представление + оформление,
то вот уже не до ухмылок ;)

[Одиночка Айс]

Semantic.Moscow, а это не равнозначные понятия? Если я попал по label, курсор будет в input. ЧЯДНТ?

[Semantic.Moscow]

Одиночка Айс, всё зависит от задачи.

программист отдал вам скелет, в который контент распихивается не вами
и повлиять на это вы никак не можете.

дизайнер говорит, что при фокусе на инпуте лебл должен пропасть или измениться,
а при клике по леблу (который вообще может быть чёрти где) инпут должен красиво выплыть из-за границ fieldset`а

мы часто забываем, что инпут может спокойно существовать вне form и довольно далеко от лейбла,
при условии, что форма и инпут имеют идентификаторы.

и так, у вас из инструментов только DOM и CSS
а программист загнал инпут в лебл и заболел воспалением хитрости.
дизайнер требует попиксельного совпадения макета и у него даже кейфреймы рассчитаны до 10мс.

не храните все яйцы в одной корзине!

[Ankhena]

Semantic.Moscow,

дизайнер говорит, что при фокусе на инпуте лебл должен пропасть или измениться,

https://codepen.io/AnnaSummer/pen/ExEbmge
и т.д.

[Semantic.Moscow]

Ankhena, т.е. остальные аргументы мы предпочтём проигнорировать?
у вас ус отклеился в том самом месте, где "пропасть или измениться" - он не пропал, а спрятался,
оставаясь в DOM,
про измениться лейбл без затрагивания инпута тоже конечно получится, но это будет сложнее и затребует некоторое время на реализацию.

так зачем на ровном месте создавать себе приключения?

[Ankhena]

Semantic.Moscow,

т.е. остальные аргументы мы предпочтём проигнорировать?

Какие аргументы? Если у вас инпут "черти где" от лейбла и не может быть связан css селектором, то без JS вы задачу не решите.
Т.е. черти где ставить норм, а внутрь запихивать нельзя. Логика потерялась в этом месте.

Да, я тоже не люблю вкладывать input внутрь label, потому что располагать их в связке input+label получается во-первых, универсальнее, во-вторых, нет лишних пустых тегов, в-третьих, есть шанс, что тегов вообще будет меньше.

Но ваш-то вопрос был

разве инпут может быть в лейбле?

.

Объективный ответ на него: да, может.
MDN только, на всякий случай, говорит о том, что хорошо бы при этом всё равно связать их через id-for для читалок.

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

[Semantic.Moscow]

Ankhena,

Т.е. черти где ставить норм, а внутрь запихивать нельзя. Логика потерялась в этом месте.

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

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

и да, мой вопрос "разве инпут может быть в лейбле?" некорректен,
скорее "можно ли допускать такое?"

выше я уже писал, что если речь о вёрстке сайта на WP, то вообще не важно, можно даже не париться из-за ханжеских правил навязанных этими занудами из W3C
но если делаем что-то серьёзное, с чем ещё предстоит поработать после релиза,
то лучшее решение, это разделять всё, что только можно, чтобы иметь возможность без головняков манипулировать любыми частями документа

[Ankhena]

но если делаем что-то серьёзное

модальное окно с инпутом - это как раз избавляет от лишних тегов и JS

Ну да, в серьезных проектах мы модалки открываем CSS'ом.

Пожалуй, я пасс продолжать эту беседу. Извините.

[Егор Соколов]

Semantic.Moscow, radio, checkbox в label, почему нет?

[Semantic.Moscow]

Ankhena, в серьёзном проекте документ обязан быть самодостаточным,
если по какой-то причини он загрузился в ином представлении (его отдали в XML) или без оформления, без JS (подразумевается, что всё это будет добавлено на другой стороне),
всё содержимое, которое мы обычно прячем в модалки должно быть на своих местах.

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

[Semantic.Moscow]

Ankhena,

Ну да, в серьезных проектах мы модалки открываем CSS'ом.

Пожалуй, я пасс продолжать эту беседу. Извините.

это уже второй ваш слив в стиле "ой, всё"

[Ankhena]

Semantic.Moscow, да, потому что вы по кругу выдаете аргументы за один вариант, не признавая существование других.

Больше того, я написала, что мне тоже больше нравится лейбл после инпута, а не внутри.

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

[Semantic.Moscow]

Ankhena, так я не получаю контраргументов.
я так же сразу признал, что спецификациям это не противоречит,
написал о том, что это может привести к проблемам,
меня спрашивают про возможные проблемы, я привожу примеры,
в ответ эти проблемы пытаются решить, вместо того, чтобы просто их не создавать.

почему в "серьёзных" проектах вызывать модалку через css, это плохо, для меня по прежнему загадка.
это не ирония - мне на самом деле интересно знать о подводных камнях,
я готов признать свои заблуждения - убедите.

[Ankhena]

Semantic.Moscow, начните, пожалуйста, с правил сервиса.
Думаю, что имеет смысл создать отдельный вопрос.

Answer 1

[cssfish]

в Css4 это так :)

label:has(input:disabled)