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

HTML-форма label Атрибут

❮ HTML-тег

Пример

Элемент


 


 

 
 



Попробуйте сами »


Определение и использование

Атрибут формы определяет форму, которой принадлежит метка.

Значение этого атрибута должно быть равно атрибуту id <форма> элемент в том же документе.


Поддержка браузера

Атрибут
форма Да Да Да Да Да

Синтаксис

Значение Описание
form_id Указывает элемент формы, которому принадлежит элемент

❮ Тег HTML


ВЫБОР ЦВЕТА



Лучшие учебники
Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебник по SQL
Учебник по Python
Учебник по W3.CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

Лучшие ссылки
HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

900 91 Лучшие примеры Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3. CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery


ФОРУМ | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

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

спросил

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

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

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

 метка[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). Синтаксис

[атрибут=значение] работает, проверяя значение атрибута для этого конкретного элемента.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *