:indeterminateе селектор на псевдоклас в CSS, наречен за състояние, което не е нито отметнато, нито непроверено. Това е онова междинно състояние, което бихме могли да разгледаме „Може би“ между опциите „Да“ и „Не“. Състоянието не е напълно определено, откъдето идва и името: неопределено.
Неопределени квадратчета за отметка
Най-често срещаното място, което можем да видим в играта, е с квадратчета за отметка във форма:
Има няколко странни неща, :indeterminateкогато става въпрос за квадратчета за отметка, които си струва да се отбележат, преди да се задълбочите как може да бъде избран в CSS.
Не може да се зададе в HTML
Първо, няма начин да зададете отметка в неопределено състояние в HTML. В началния пример по-горе успяхме да настроим второто квадратче за отметка, като изрично го казахме в HTML.
Логично е да приемем, че можем да направим същото с неопределено състояние:
За съжаление обаче това не е така, така че не използвайте последния пример в кода си.
По време на това писане Javascript е единственото средство за задаване на неопределено състояние в квадратчето. Един от начините да го направите е да изберете конкретно квадратче за отметка по ID:
var checkbox = document.getElementById("some-checkbox"); checkbox.indeterminate = true;Ограничението на горния пример е, че квадратчето за отметка никога не може да се върне в неопределено състояние, след като се промени в друго състояние. Вместо това можем да се въртим между проверени, непроверени и неопределени състояния:
function toggle(demo) ( if (demo.readOnly) demo.checked=demo.readOnly=false; else if (!demo.checked) demo.readOnly=demo.indeterminate=true; )Вижте състоянията на квадратчето за завъртане на писалката от Geoff Graham (@geoffgraham) на CodePen.
Това е чисто визуално състояние
Полето за отметка все още брои дали е маркирано или не, независимо дали сме активирали неопределено състояние. С други думи, неопределено маскира действителната стойност на квадратчето за отметка и не се брои като собствена стойност.
По подразбиране външният вид е несъвместим във всички браузъри
Подобно на цифровите входове, неопределеното състояние не стилизира последователно във всеки браузър.
Като цяло обаче тук е поддръжката за неопределени отметки.
Тези данни за поддръжка на браузъра са от Caniuse, който има повече подробности. Число показва, че браузърът поддържа функцията на тази версия и по-нова.
работен плот
| Chrome | Firefox | IE | Ръб, край | Сафари |
|---|---|---|---|---|
| 28 | 3.6 | 6 | 12 | 6 |
Мобилен / таблет
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4.4 | 12.2-12.4 |
Неопределени радио бутони
:indeterminate може да се прилага за радио бутони на ниво група, където се счита, че цялата група е в неопределено състояние, ако не е избрана опция.
Вижте радио бутоните за неразрешаване на писалката от Geoff Graham (@geoffgraham) на CodePen.
Трябва да отбележим, че използването :indeterminateможе да не е най-добрият избор, що се отнася до потребителското изживяване.
Неопределени ленти за напредъка
Можем да приложим :indeterminateи за елемента, където в HTML не е изрично зададена стойност. Няма нужда от Javascript, но стилът на елемента сам по себе си е сложно нещо, което изисква много работа и внимание за последователността на различни браузъри.
Вижте елемента за неопределен напредък на писалката от Geoff Graham (@geoffgraham) на CodePen.
Поддръжка на браузър
Тези данни за поддръжка на браузъра са от Caniuse, който има повече подробности. Число показва, че браузърът поддържа функцията на тази версия и по-нова.
работен плот
| Chrome | Firefox | IE | Ръб, край | Сафари |
|---|---|---|---|---|
| 39 | 51 | 11. | 79 | 10.1 |
Мобилен / таблет
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 10.3 |
Повече информация
- CSS селектори ниво 4 Работен проект
- Неопределени квадратчета за отметка
- Неопределени радио бутони
- HTML5 елемент за напредък