Css for label for: css selectors — How to select label for=»XYZ» in CSS?

Leave a Comment / Css / By /

HTML и CSS с примерами кода

Тег <label> (от англ. label — метка, ярлык) устанавливает связь между определённой меткой, в качестве которой обычно выступает текст, и элементом формы (<input>, <select>, <textarea>).

Такая связь необходима, чтобы изменять значения элементов формы при щелчке курсором мыши на текст. Кроме того, с помощью <label> можно устанавливать горячие клавиши на клавиатуре и переходить на активный элемент подобно ссылкам.

Существует два способа связывания объекта и метки. Первый заключается в использовании идентификатора id внутри элемента формы и указании его имени в качестве атрибута for элемента <label>. При втором способе элемент формы помещается внутрь контейнера <label>.

Формы
  • button
  • datalist
  • fieldset
  • form
  • input
  • label
  • legend
  • meter
  • optgroup
  • option
  • output
  • progress
  • select
  • textarea

Синтаксис

<input /><label for="<идентификатор>"
  >Текст</label
>
<label><input /> Текст</label>

Закрывающий тег обязателен.

Атрибуты

for
Идентификатор элемента, с которым следует установить связь.

Также для этого элемента доступны универсальные атрибуты.

for

Задаёт уникальный идентификатор, определяемый с помощью атрибута id элемента <input>, с которым следует установить связь. Атрибут for необходимо задавать в том случае, когда элемент формы и текст разделены. Если <input> размещается внутри контейнера <label>, то применять атрибут for не требуется.

Синтаксис

<label for="<идентификатор>">...</label>

Значения

Имя идентификатора. Такое имя чувствительно к регистру, поэтому его следует писать так же, как оно описано внутри элемента <input>.

Значение по умолчанию

Нет.

Спецификации

  • WHATWG HTML Living Standard
  • HTML 5
  • HTML 4. 01 Specification

Описание и примеры

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>LABEL</title>
  </head>
  <body>
    <form action="handler.php">
      <p><b>Выберите напиток</b></p>
      <p>
        <input type="checkbox" /><label
          for="check1"
          >Коньяк</label
        ><br />
        <input type="checkbox" /><label
          for="check2"
          >Арманьяк</label
        ><br />
        <input type="checkbox" /><label
          for="check3"
          >Кальвадос</label
        ><br />
      </p>
    </form>
  </body>
</html>

Ссылки

  • Тег <label> MDN (рус.)

Подключить свой .css файл для содержимого label — Вопросы и проблемы

urjadovaa (Andrey Urjadov)

#1

Коллеги, добрый день!

Такая ситуация.
Сервис возвращает набор данных в виде куска html (без header).

Далее высвечиваем этот html в label:

<scrollBox>
    <label 
         css="modules/web/themes/infocenterTheme/dossier.css"
         htmlEnabled="true" 
         
        />
</scrollBox>

Подключаем отдельный css-файл для декорации полученного куска html.
Получаем сообщение “некорректная строка css…”

Подскажите, может быть мы не там размещаем файл css? Или указываем не тот путь?
Или, возможно, нужно подключить css непосредственно в html?

jreznot (Yuriy Artamonov)

#2

в XML компонентов css атрибут это не файл, а код на языке CSS

urjadovaa (Andrey Urjadov)

11.2021 11:49:22

#3

Юрий, спасибо!
Тогда возможен такой путь: прописать в html ссылку на css-файл, который будет размещен где-нибудь в проекте? И если да, куда его лучше положить?

jreznot (Yuriy Artamonov)

#4

Для того, чтобы просто назначить CSS класс на компонент, воспользуйтесь свойством stylename

https://doc.cuba-platform.com/manual-7.2-ru/gui_Label.html

https://doc.cuba-platform.com/manual-7.2-ru/web_theme_extension.html

urjadovaa (Andrey Urjadov)

26.11. 2021 12:28:28

#5

Может, я плохо объясняю… Как подключать css-классы к компоненту понятно; подключаем и используем.
Я описываю случай, когда в компонент приходит целый html-файл со сложной структурой (допустим, страничка сайта). И вот для этого html-файла нужно назначить не отдельный css-класс, а целый набор css-классов (возможно, описанный в отдельном css-файле).

sergeevms.33 (Михаил Сергеев)

#6

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

ScreenDependencyUtils.addScreenDependency(this, "vaadin://brand-login-screen/login.css", Dependency. Type.STYLESHEET)

Подсмотрено в контроллере расширенного логин-экрана.

jreznot (Yuriy Artamonov)

#7

Если вы смогли назначить на корневой компонент stylename, например root, то потом просто пишите CSS с учётом иерархии, CSS для того и придумывали:

.root .child {
 // style-here
}

А в SCSS ещё проще:

.root {
  .child1 {}
  .child2 {}
}

1 симпатия

CSS — Селектор метки для типа?

спросил

9 лет, 5 месяцев назад

Изменено 9 лет, 5 месяцев назад

Просмотрено 24к раз

Я использую этот пост, объясняющий, как добавить селектор метки для данного элемента. Однако я хотел бы использовать его для выбора всех меток для данного типа (в частности, радио типа). Попытка:

 метка[for=input[type="radio"]] {
    /* Стили */
}

и

 ярлык[for=[type="radio"]] {
    /* Стили */
}

не работает, и я не уверен, что я делаю неправильно или как сделать это правильно. Может ли кто-нибудь объяснить мне решение? Спасибо много!

  • css
  • css-селекторы

3

К сожалению, то, что вы хотите, невозможно сделать с помощью текущих селекторов CSS3.

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

Идея состоит в том, чтобы селектор выглядел примерно так:

 label /for/ [type="radio"] {
    /* стили */
}

Но это на будущее, а не сейчас. Извиняюсь.

Вы можете прочитать об этом здесь: http://css4-selectors. com/selector/css4/reference-combination/

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

Например, если они находятся рядом друг с другом, вы можете использовать это:

 label + input[type="radio"] { .... }

Пока это максимально близко.

1

Вместо этого вы должны использовать специальные классы для этих меток. Вы не можете стилизовать родительский элемент на основе его дочерних атрибутов в CSS [в настоящее время].

В вашей таблице стилей будет указано

 метка.радио{
  /* добавьте сюда стили */
}

Сначала — исправление

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

Таким образом, для не является решением простой проверки типа .

Второе — единственное решение только для CSS

Единственный чистый способ сделать это с помощью чистого CSS — это если ваши элементы упорядочены таким образом ( label после input ):

Что позволяет этому css выбирать:

 input[type=radio] + label {
    /* стили */
}

Если это невозможно, я бы выбрал решение AbsoluteƵERØ с использованием класса.

То, что вы пытаетесь сделать, невозможно (во всяком случае, только с помощью CSS). Синтаксис [атрибут=значение] работает, проверяя значение атрибута для этого конкретного элемента. Таким образом, for=[type="radio"]] ищет что-то вроде (если синтаксис допустим).

2

Попробуйте это:

 input[type=radio]
{
CSS идет сюда
}

2

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Обязательно, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Есть ли способ установить стиль CSS для метки определенного типа ввода?

Задавать вопрос

спросил

Изменено 5 лет, 4 месяца назад

Просмотрено 17 тысяч раз

У меня есть следующий набор стилей для меток определенной формы:

 #incidentForm label {
    вес шрифта: полужирный;
    ширина:40%;
    вертикальное выравнивание: сверху;
}

Это именно то, что я хочу для своей полностраничной формы. Но для модального окна, которое позволяет обновлять одно поле из отчета, где кто-то будет просматривать результаты данных, я бы хотел, чтобы метка ТОЛЬКО ДЛЯ ТЕКСТОБЛАСТИ НЕ ограничивалась «шириной: 40%». Все другие типы ввода должны сохранять «ширину: 40%».

Я пытался понять, как сделать исключение :NOT для существующего стиля метки или как-то установить отдельный стиль на основе класса модального окна. IE:

 Метка .updateModal (которая каким-то образом идентифицирует только текстовые области) {
    ширина:100%;
}

Вот пример структуры самого модального окна обновления:

 

  <дел>
    <дел>
      

        <набор полей>
          Редактировать поле отчета
          <дел>

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

У кого-нибудь есть предложения?

Большое спасибо!

4 9=»3″] { красный цвет; // Это будет применяться ко всем меткам, начинающимся с «3» }

Или просто вы можете написать:

 метка[for="31"],метка[for="32"],метка[for="и так далее.."] {
    красный цвет;
}

или для общего ярлыка Просто напишите

 ярлык {
    красный цвет; // Это повлияет на все метки на странице
}

3

В CSS предметом селектора является последний составной селектор всего селектора (https://www.w3.org/TR/selectors4/#subject). В CSS4 есть новый селектор темы, который позволит это сделать. Похоже: 9Этикетка 0063! + текстовое поле . ! означает, что селектор метки является предметом этого селектора.

К сожалению, это еще не реализовано ни в одном браузере (http://css4-selectors.com/selector/css4/subject-of-selector-with-child-combinator/). Учитывая это, у нас есть возможность искать только потомков, детей и младших братьев и сестер.

Если у вас есть возможность управлять своим HTML, это дает нам возможность: если мы изменим порядок DOM элемента формы и метки, то 9Метка 0063 становится младшей сестрой текстовой области . Это дает нам возможность использовать соседний селектор + . Визуальный порядок можно изменить с помощью флексбокса с обратным столбцом. Рассмотрим:

 

  
  


<дел>
  <тип ввода="текст">