Псевдокласс indeterminate

CSS псевдокласс :indeterminate

CSS псевдокласс :indeterminate выбирает элемент пользовательского интерфейса, который находится в неопределенном состоянии.

Псевдокласс :indeterminate задает стиль для флажков и переключателей, элементов progress.

Неопределенное состояние флажков может быть задано только через JavaScript. Переключатели и элементы progress могут быть установлены в HTML.

Версия

Синтаксис

Пример

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

Псевдокласс :indeterminate

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

Надо знать обо всем понемножку, но все о немногом.

Кто умеет, тот делает. Кто не умеет, тот учит. Кто не умеет учить — становится деканом. (Т. Мартин)

Самоучитель CSS
Новости
Справочник CSS
Афоризмы
  • 02 ноябрь 2020, 00:00
CRAB MONSTER — БОЕВЫЕ КРАБЫ ПРИНОСЯТ ХОРОШИЙ ЗАРАБОТОК / ЗАРАБОТОК В ИНТЕРНЕТЕ — «Видео уроки — CSS»
  • 02 ноябрь 2020, 00:00
ПЕРВЫЙ ЗАРАБОТОК В BEST FIENDS. 3000 РУБЛЕЙ СТРАХОВКА / ЗАРАБОТОК В ИНТЕРНЕТЕ — «Видео уроки — CSS»
  • 02 ноябрь 2020, 00:00
CRAB MONSTER — ВЫВОДИМ ПЕРВЫЙ ЗАРАБОТОК. Рефбек 100% — «Видео уроки — CSS»
  • 10 ноябрь 2020, 00:01
26 ноября MediaTek представит 5G-процессор для смартфонов среднего класса — «Новости сети»
Помогли мы вам
Псевдокласс — :indeterminate
Internet Explorer Chrome Opera Safari Firefox Android iOS
9.0+ 1.0+ 10.60+ 3.1+ 3.6+ 2.1+ 2.0+

Краткая информация

Значение по умолчанию Нет
Ссылка на спецификацию http://www.w3.org/TR/css3-selectors/#indeterminate

Версии CSS

CSS 1 CSS 2 CSS 2.1 CSS 3

Описание

Псевдокласс :indeterminate задает стиль для элементов форм, таким как флажки и переключатели, когда они находятся в неопределенном состоянии. К примеру, если из группы флажков ни один не помечен, то флажки находятся в указанном состоянии. В реальности, стиль применяется только к элементам, у которых DOM-атрибут :indeterminate через javascript установлен в значение true.

Синтаксис

Значения

HTML5 CSS3 IE Cr Op Sa Fx

В данном примере с помощью javascript первый элемент формы переводится в неопределенное состояние и к нему применяются стили. Результат примера показан на рис. 1.

Рис. 1. Результат использования псевдоэлемента :indeterminate

Indeterminate Checkboxes

Easily manage projects with monday.com

Checkbox inputs can only have two states: checked or unchecked. They can have any value, but they either submit that value (checked) or don’t (unchecked) with a form submission. The default is unchecked. You can control that in HTML like this:

Visually, there are actually three states a checkbox can be in: checked, unchecked, or indeterminate. They look like this:

Here are some things to know about indeterminate checkboxes:

You can’t make a checkbox indeterminate through HTML. There is no indeterminate attribute. It is a property of checkboxes though, which you can change via JavaScript.

or jQuery style:

The indeterminate state is visual only. The checkbox is still either checked or unchecked as a state. That means the visual indeterminate state masks the real value of the checkbox, so that better make sense in your UI!

Like the checkboxes themselves, indeterminate state looks different in different browsers. Here’s Opera 11.50 on Mac:

Use Case

The reason I’m writing this is because I just had a use case come up for this state: nested checkboxes. Each checkbox may have child checkboxes. If all those children are checked, it may be checked. If none are checked, it is unchecked. If some of them are checked, then it’s in an indeterminate state (in this case symbolically meaning «partially» checked).

Here’s that in jQuery:

And here’s a plain JavaScript version from Jakob Eriksen:

Using StimulusJS from Stephen Margheim:

Rotating amongst the states

Jon Stuebe was messing around with the idea of rotating the state between unchecked, indeterminate, and checked with a click. Here’s some jQuery to do that:

Reader Casual Trash sent me in a library-free and far more succinct version of rotating through all three visual states which utilizes the readonly attribute that checkbox inputs can have.

Can I use :indeterminate CSS pseudo-class?

Compatibility table for support of :indeterminate CSS pseudo-class in desktop and mobile browsers.

Legend

  • Green = Supported
  • Red = Not supported
  • Greenish yellow = Partial support
  • Gray = Support unknown

:indeterminate CSS pseudo- > — UNOFF

Global usage

The :indeterminate pseudo-class matches indeterminate checkboxes, indeterminate

bars, and radio buttons with no checked button in their radio button group.

  1. 5.5
  2. 6
  3. 7
  4. 8
  5. 9
  6. 10
  7. 11
  1. 12
  2. 13
  3. 14
  4. 15
  5. 16
  6. 17
  7. 18
  8. 76
Илон Маск рекомендует:  perspective-origin в CSS

Firefox

  1. 2
  2. 3
  3. 3.5
  4. 3.6
  5. 4
  6. 5
  7. 6
  8. 7
  9. 8
  10. 9
  11. 10
  12. 11
  13. 12
  14. 13
  15. 14
  16. 15
  17. 16
  18. 17
  19. 18
  20. 19
  21. 20
  22. 21
  23. 22
  24. 23
  25. 24
  26. 25
  27. 26
  28. 27
  29. 28
  30. 29
  31. 30
  32. 31
  33. 32
  34. 33
  35. 34
  36. 35
  37. 36
  38. 37
  39. 38
  40. 39
  41. 40
  42. 41
  43. 42
  44. 43
  45. 44
  46. 45
  47. 46
  48. 47
  49. 48
  50. 49
  51. 50
  52. 51
  53. 52
  54. 53
  55. 54
  56. 55
  57. 56
  58. 57
  59. 58
  60. 59
  61. 60
  62. 61
  63. 62
  64. 63
  65. 64
  66. 65
  67. 66
  68. 67
  69. 68
  70. 69
  71. 70
  72. 71
  73. 72

Chrome

  1. 4
  2. 5
  3. 6
  4. 7
  5. 8
  6. 9
  7. 10
  8. 11
  9. 12
  10. 13
  11. 14
  12. 15
  13. 16
  14. 17
  15. 18
  16. 19
  17. 20
  18. 21
  19. 22
  20. 23
  21. 24
  22. 25
  23. 26
  24. 27
  25. 28
  26. 29
  27. 30
  28. 31
  29. 32
  30. 33
  31. 34
  32. 35
  33. 36
  34. 37
  35. 38
  36. 39
  37. 40
  38. 41
  39. 42
  40. 43
  41. 44
  42. 45
  43. 46
  44. 47
  45. 48
  46. 49
  47. 50
  48. 51
  49. 52
  50. 53
  51. 54
  52. 55
  53. 56
  54. 57
  55. 58
  56. 59
  57. 60
  58. 61
  59. 62
  60. 63
  61. 64
  62. 65
  63. 66
  64. 67
  65. 68
  66. 69
  67. 70
  68. 71
  69. 72
  70. 73
  71. 74
  72. 75
  73. 76
  74. 77
  75. 78
  76. 79
  77. 80
  78. 81

Safari

  1. 3.1
  2. 3.2
  3. 4
  4. 5
  5. 5.1
  6. 6
  7. 6.1
  8. 7
  9. 7.1
  10. 8
  11. 9
  12. 9.1
  13. 10
  14. 10.1
  15. 11
  16. 11.1
  17. 12
  18. 12.1
  19. 13
  20. TP

Opera

  1. 9
  2. 9.5-9.6
  3. 10.0-10.1
  4. 10.5
  5. 10.6
  6. 11
  7. 11.1
  8. 11.5
  9. 11.6
  10. 12
  11. 12.1
  12. 15
  13. 16
  14. 17
  15. 18
  16. 19
  17. 20
  18. 21
  19. 22
  20. 23
  21. 24
  22. 25
  23. 26
  24. 27
  25. 28
  26. 29
  27. 30
  28. 31
  29. 32
  30. 33
  31. 34
  32. 35
  33. 36
  34. 37
  35. 38
  36. 39
  37. 40
  38. 41
  39. 42
  40. 43
  41. 44
  42. 45
  43. 46
  44. 47
  45. 48
  46. 49
  47. 50
  48. 51
  49. 52
  50. 53
  51. 54
  52. 55
  53. 56
  54. 57
  55. 58
  56. 60
  57. 62
  58. 63
  59. 64

iOS Safari

  1. 3.2
  2. 4.0-4.1
  3. 4.2-4.3
  4. 5.0-5.1
  5. 6.0-6.1
  6. 7.0-7.1
  7. 8
  8. 8.1-8.4
  9. 9.0-9.2
  10. 9.3
  11. 10.0-10.2
  12. 10.3
  13. 11.0-11.2
  14. 11.3-11.4
  15. 12.0-12.1
  16. 12.2-12.4
  17. 13.0-13.2

Opera Mini

Android Browser

  1. 2.1
  2. 2.2
  3. 2.3
  4. 3
  5. 4
  6. 4.1
  7. 4.2-4.3
  8. 4.4
  9. 4.4.3-4.4.4
  10. 76

Blackberry Browser

Opera Mobile

  1. 10
  2. 11
  3. 11.1
  4. 11.5
  5. 12
  6. 12.1
  7. 46

Chrome for Android

Firefox for Android

IE Mobile

UC Browser for Android

Samsung Internet

  1. 4
  2. 5.0-5.4
  3. 6.2-6.4
  4. 7.2-7.4
  5. 8.2
  6. 9.2
  7. 10.1

QQ Browser

Baidu Browser

KaiOS Browser

Browser support tables for modern web technologies

Created & maintained by @Fyrd, design by @Lensco.

Support data contributions by the GitHub community.

Usage share statistics by StatCounter GlobalStats for October, 2020

Поговорим про :checked

В последнее время сложилось ощущение, что много людей пишет про создание табов (вкладок) на CSS.
Сейчас я хочу рассказать про ещё один способ создания вкладок на CSS (Предупреждая выпады в свою сторону, упомяну, что без :target).

Но обо всём по порядку.

:checked или немного теории

Итак, в CSS3 (В модуле css3-selectors) появился новый псевдокласс :checked.
Вкратце, этот псевдокласс применяется к тем input’ам (checkbox или radiobutton), которые выставлены пользователем в состояние выбора (checked).

Табы, табы, табы

Довольно много реализаций табов было описано (Например, вот тут сделано через поле input type=«text» выставленное в readonly), но в большинстве своём они опирались на псевдокласс :target, чьё использование немного неоправданно из-за «прыгающего» контента.

Из-за чего была придумана сверхпростая реализация вкладок при помощи :checked и радиобаттонов.

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

Сей код лишён всех лишних стилей, дабы не мешать пониманию.
Отдельно хочу сказать, что это лишь пример, что можно сделать при помощи CSS и HTML, ибо использование сего в реальных сайтах затруднительно и вот почему:
Сей код корректно работает в Firefox, Opera, IE9+, но не работает в Webkit-браузерах. а вот тут я немного поспешил.
WebKit не обновляет значение до изменения кода, но его можно принудительно заставить это делать, добавив весьма грязный хак:

Анимация, которая ничего не делает. Вебкит не перестаёт удивлять.

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

Немного бреда

А что, если использовать чекбоксы для ввода двоичных чисел?

Берём два чекбокса, располагаем последовательно и делаем что-то вроде:

Бред? Сумасшествие? Троллейбус.jpg? На самом деле, всего-лишь демонстрация и немного свободного времени.
К слову, за полчаса был написан вот такой небольшой скриптик, генерирующий стиль (Аналогичный вышенаписанному) и строчку из чекбоксов для перевода из двоичной системы в десятеричную :)
Немного погодя был написан аналогичный скрипт, генерирующий аналогичный стиль, но для перевода из троичных чисел в десятеричные.
В HTML существуют tri-state чекбоксы, но для их создания требуется javascript (для выставления элементу indeterminate = true), а так же есть псевдокласс :indeterminate по аналогии с :checked.

Разумеется, и речи не идёт где-то это применять вот таким методом. Всё это приводится как информация к размышлению.

А ещё?

Вот здесь можно почитать заметку за авторством kizu про выпадающие менюшки, основанные на том же принципе.

One more step

Please complete the security check to access codepen.io

Why do I have to complete a CAPTCHA?

Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.

What can I do to prevent this in the future?

If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.

If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.

Илон Маск рекомендует:  Что такое код pg_insert

Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store.

Cloudflare Ray ID: 5341e672ee7e8de1 • Your IP : 188.64.174.135 • Performance & security by Cloudflare

Урок 3. Псевдоклассы и псевдоэлементы

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

Синтаксис у них простой и одинаковый: псевдоклассы и псевдоэлементы указываются уже после объявления селектора, затем двоеточие : и название псевдокласса / псевдоэлемента.

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

Вышеуказанный код обозначает, что при наведении (hover) на ссылку, то есть элемент a ( ) цвет текста ссылки (color) будет чёрным.

Псевдоклассы

Псевдоклассы — это элементы, которые указывают определённый набор стилей, в случае различных событий и изменений состояния элемента. Например, как изменятся стили в случае наведения, клика и тд на элемент.

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

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

hover — при наведении курсора на элемент
focus — при клике на элемент, например поле для ввода данных
active — при активации элемента пользователем, то есть в момент клика
link — стиль для не посещённых ссылок
visited — стилевое оформление к посещенным ссылкам
target — переход к выбранному фрагменту документа, в адресе после # указывается имя идентификатора
root — определение корневого элемента документа
indeterminate — стиль для флажков (radio) и переключателей (checkbox) в неопределенном состоянии
checked — стиль для radio и checkbox в выбранном положении: input:checked
firstchild — стиль для первого дочернего элемента селектора
lastchild — изменения в последнем элементе родителя
onlychild — для дочерних элементов, единственных у родителя
lang (en) — определение языка элемента, где en выбранный язык

Код CSS Примеры

Псевдоэлементы

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

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

after — добавление контента ПОСЛЕ указанного элемента
before — добавление контента ДО указанного элемента
firstletter — стили для первой буквы в контенте элемента
firstline — стилевое оформление первой строки текста в элементе
selection — применение стилей при выделении текста в элементе

Одной из самых распространённых задач является добавление фразы до или после элемента. Рассмотрим на примере цитат. Допустим для определённого эелемента нужно добавить текст перед ним.

Также при помощи уже after можно добавить слова после указанного класса. Например, слово Далее или Авторскую подпись.

Обязательно проверьте работу псевдоклассов и псевдоэлементов! Это увлекательно)
Спасибо за внимание!

Indeterminate checkboxes with Vue.js

I just started out working with Vue and I’m trying to visualise a nested list.

The list-items should contain triple-state checkboxes: When a child item is checked, the parent item’s checkbox should become ‘indeterminate’. When all child-checkboxes are checked, the parent checkbox should also become checked. When a parent item checkbox is checked, all child item checkboxes (also the ones nested deeper) should be selected too.

I kind of have a working solution (check out this pen or the code below) but the checkbox-logic is still flawed. For this example, checked boxes are green, indeterminate ones are orange and unchecked ones are red.

I’ve run out of ideas how to fix it. Could someone shed some light on how to accomplish this in Vue?

Псевдокласс CSS indeterminate

Посмотрите заметку на CSS-Tricks про один из новых псевдоклассов :indeterminate , который изображает пограничное состояние чекбокса.

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Поиск

uWebDesign настоятельно рекомендует!

Темы к ближайшему подкасту (6 комментариев)

Предлагайте свои темы для выпуска #214 в комментариях!

:indeterminate

:indeterminate is a CSS pseudo-class selector used to select a user interface element that is in an indeterminate state.

For example, radio and checkbox elements can be toggled between checked and unchecked states, but are sometimes in an indeterminate state, neither checked nor unchecked. Similarly, a progress meter (

) can be in an indeterminate state when the percent completion is unknown.

So, more specifically, the :indeterminate pseudo-class selects the following elements:

  • Checkboxes ( ) whose indeterminate attribute is set to true.
  • Radio buttons ( ) whose radio button group contains no radio button that is checked.
  • A progress element (

) that has no value attribute. The progress element is an HTML5 element that is used to represent the completion progress of a task.

The indeterminate state of an element can be set only via JavaScript. The indeterminate attribute mentioned above is only available and applicable in JavaScript, which means that you cannot set the an element’s state to indeterminate via HTML like so:

To set an element to an indeterminate state, you can only do it via JavaScript. For example, if you have a set of checkboxes in a page, the following line will select the first one and change its state to an indeterminate state:

Use Case: Nested Checkboxes

One might wonder how or when the :indeterminate state would be useful, or when one might want to set a checkbox’s state, for example, to be indeterminate.

A checkbox can be either checked or unchecked. That’s actually literally true. Even if the checkbox’s state is set to indeterminate, the checkbox’s visual style will change, but the underlying state will still be either checked or unchecked.

So, visually speaking, a checkbox can have three states: checked, unchecked, or indeterminate. (Again, the indeterminate state is visual only.)

The following screenshot shows how a checkbox would look in one of the three states in Chrome on Windows.

Default checkbox state styles applied by Chrome on Windows.

The above state styles are applied in Chrome. Checkboxes usually look different in different browsers, and so do their state state styles.

So, one use case where it might be useful to set a checkbox’s state (and style) to indeterminate is when you have nested checkboxes, where a checkbox has children checkboxes. You can see this usually in user interfaces that offer multiple choices, and where some choices have “sub-choices”.

Usually, the “parent” checkbox is set so that it can be used to toggle the styles of all its children checkboxes—checking it would check all the children, unchecking it would uncheck all the children. Unchecking it would allow the user to check some of the options in the children checkboxes, while leaving others unchecked.

So, using this concept, a checkbox can be checked if all its descendant checkboxes are checked, unchecked if all of its descendant checkboxes are unchecked, and indeterminate when only a subset of its descendant checkboxes are checked.

The following is a live demo demonstrating this use case. The demo is originally by Lea Verou. This is a fork of her original demo. The parent checkbox changes its styles based on the number of its checked descendants. Using JavaScript, its state is changed to and from the indeterminate state.

Trivia & Notes

When checkbox and radio buttons are checked, their checked state can be styled using the :checked pseudo-class.

Just like other pseudo-class selectors, the :indeterminate selector can be chained with other selectors such as :hover , for example, to provide hover styles for the element that is in an indeterminate state. For example:

Examples

The following snippet will select the label of a checkbox that is in an indeterminate state and make it grey.

Live Demo

The following demo will turn the color of the checkbox’s label into deepPink if it is in an indeterminate state.

Applying :indeterminate to a progress bar

The following demo changes the styles of a progress bar in an indeterminate state. The progress bar’s state is indeterminate because its value attribute has been removed. The second progress bar is the one in an indeterminate state, and thus it is the one styled using the :indeterminate pseudo-class.

Styling progress bars is browser-specific and is a long topic which is outside the scope of this entry. The progress’ value bar and background styling isn’t consistent across all browsers. To learn more about the HTML5 progress element and how to style it, check out this article on the Treehouse Blog: How to use the Meter & Progress Elements.

For demonstration purposes, the second progress bar in the following demo styled using :indeterminate will turn the mouse cursor into a “wait” cursor when you hover over it. This will work in all browsers that support using :indeterminate on progress bars. To know whether or not it is supported in your browser, please see the browser support section below.

Additionally, the indeterminate progress bar gets a gray background color, while the first progress bar gets a light grey background color and a blue progress value bar. The result of these styles is, however, inconsistent among browsers.

The following is a screenshot of the demo as it looks in WebKit-based browsers (including post-WebKit Opera).

The result of applying :indeterminate styles to a progress bar (the second one) in an indeterminate state in WebKit-based browsers.

Hover over the second progress bar in the demo to see the mouse cursor change. (Depending on your browser, the progress bars may or may not look like the above screenshot.)

Browser Support

The :indeterminate pseudo-class is supported in Chrome, Firefox, Safari, Opera 10.60+, Internet Explorer 9+ and on Android (?) and iOS (?), to be used on checkboxes.

Using the :indeterminate pseudo-class on a progress element is supported in Chrome, Firefox, Safari, Opera, and Internet Explorer 10+.

Further Reading

Written by Sara Soueidan. Last updated February 3, 2015 at 12:33 pm by Pedro Botelho.

Do you have a suggestion, question or want to contribute? Submit an issue.

Илон Маск рекомендует:  Что такое код ultoa
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL