Css input disabled label

Атрибут disabled

Если у элемента формы есть этот атрибут, то с ним нельзя взаимодействовать.

Время чтения: меньше 5 мин

Кратко

Скопировать ссылку «Кратко» Скопировано

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

Пример

Скопировать ссылку «Пример» Скопировано

В примере атрибут задан для целой группы элементов. В итоге ни с одним из полей внутри отключённого нельзя взаимодействовать:

    Ваше имя  Ваш номер телефона  fieldset disabled> label> Ваше имя input type="text"> label> label> Ваш номер телефона input type="text"> label> fieldset>    Скопировать Скопировано Не удалось скопировать   

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Это булевый атрибут. Само его наличие говорит браузеру, что элемент нужно отключить.

Может применяться к следующим элементам формы:

Как понять

Скопировать ссылку «Как понять» Скопировано

Атрибут disabled делает элемент неактивным: с ним нельзя взаимодействовать, кликнуть на него, на нём нельзя сфокусироваться, отключённое поле не будет отправлено вместе с остальными полями формы.

Атрибут срабатывает не только на самом элементе, но и на всех его потомках.

Наличие атрибута disabled отключает влияние атрибутов required и pattern . Потому что значение неактивного поля не может быть изменено браузер экономит время на их проверке.

Подсказки

Скопировать ссылку «Подсказки» Скопировано

💡 Элемент с атрибутом disabled можно стилизовать при помощи псевдокласса :disabled . По умолчанию браузер делает их серыми и менее контрастными.

Источник

How to style a HTML label for disabled input

You will have to wrap it in a span (or any other element really).

span < display: inline-block; overflow: hidden; >input < float: right; >label < float: left; >input:disabled < background:#dddddd; >input + label < float: none; >input:disabled + label

This selector input:disabled+label targets label elements that are placed after an input element that is disabled

In this snippet the label is after a disabled input, so the label element is gray

In this case, the label is before the input so the selector does not apply to it

Possible solution would be to wrap your elements in an extra div and apply a class name to the div, something like this

And then you can write your css like this

Based on the comment made by @andi:

input:disabled+label means that the label is immediately AFTER the input. In your HTML, the label comes BEFORE the text input. (but there’s no CSS for «before».)

He’s absolutely right. But that shouldn’t stop us being able to solve the problem with a little trickery!

First step: swap the HTML elements order so that the appears after the . This will allow the styling rules to work as desired.

Then for the fun bit: use CSS to position the labels for text inputs on the left hand side!

input:disabled < background: #dddddd; >input:disabled+label < color: #ccc; >input[type=text]+label

Источник

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Disabled labels label:disabled #4524

Disabled labels label:disabled #4524

Comments

Is there any possibility labels which refer to a disabled input (or any form control like select , textarea , ect. ) can have additional styling applied to?

 div> label for pl-s">test">Labellabel> input type pl-s">checkbox" id pl-s">test"> div> div> input type pl-s">checkbox" id pl-s">test2" disabled> label for pl-s">test2">Labellabel> div> div> label for pl-s">test3">Labellabel> input type pl-s">checkbox" id pl-s">test3" disabled> div> label> span>Labellabel> input type pl-s">checkbox" disabled> label>

input:disabled < /* Styling for disabled input, this currently works */ >label:disabled < /* Styling for label referring to a disabled input, this currently doesn't works */ >

So my proposal is to add a disabled state for labels, like described in the CSS block above. Let me know if I’m missing something here.

The text was updated successfully, but these errors were encountered:

Источник