:indeterminateär en pseudoklassväljare i CSS uppkallad efter ett tillstånd som varken är markerat eller avmarkerat. Det är det där emellan som vi kan överväga alternativet "Kanske" mellan "Ja" och "Nej". Staten är inte helt bestämd, därav namnet: obestämd.
Obestämda kryssrutor
Den vanligaste platsen vi kan se detta i spel är med kryssrutorna i en form:
Det finns några knäppa saker om :indeterminatenär det gäller kryssrutor som är värda att notera innan du gräver i hur det kan väljas i CSS.
Det kan inte ställas in i HTML
För det första finns det inget sätt att ställa in en kryssruta till ett obestämt tillstånd i HTML. I öppningsexemplet ovan kunde vi ställa in den andra kryssrutan till kryssad genom att uttryckligen säga det i HTML.
Det är bara logiskt att anta att vi kan göra detsamma med ett obestämt tillstånd:
Men tyvärr är det inte så, använd inte det sista exemplet i din kod.
När detta skrivs är Javascript det enda sättet att ställa in ett obestämt tillstånd i en kryssruta. Ett sätt att göra det är att markera en specifik kryssruta efter ID:
var checkbox = document.getElementById("some-checkbox"); checkbox.indeterminate = true;Begränsningen av exemplet ovan är att kryssrutan aldrig kan komma tillbaka till ett obestämt tillstånd när den ändras till ett annat tillstånd. Istället kan vi rotera mellan kontrollerade, okontrollerade och obestämda tillstånd:
function toggle(demo) ( if (demo.readOnly) demo.checked=demo.readOnly=false; else if (!demo.checked) demo.readOnly=demo.indeterminate=true; )Se Pen Rotate Checkbox States av Geoff Graham (@geoffgraham) på CodePen.
Det är rent visuellt tillstånd
En kryssruta räknar fortfarande bara om den är markerad eller avmarkerad, oavsett om vi har aktiverat ett obestämt tillstånd. Med andra ord maskerar obestämt kryssrutans faktiska värde och räknas inte som ett eget värde.
Standardutseendet är inkonsekvent i alla webbläsare
Precis som numeriska ingångar utformar inte ett obestämt tillstånd konsekvent i alla webbläsare.
Sammantaget är här dock stödet för obestämda kryssrutor.
Denna webbläsares supportdata kommer från Caniuse, som har mer detaljer. Ett nummer indikerar att webbläsaren stöder funktionen i den versionen och uppåt.
Skrivbord
| Krom | Firefox | IE | Kant | Safari |
|---|---|---|---|---|
| 28 | 3.6 | 6 | 12 | 6 |
Mobil / surfplatta
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4.4 | 12.2-12.4 |
Obestämda radioknappar
:indeterminate kan gälla radioknappar på gruppnivå, där hela gruppen anses vara i ett obestämt tillstånd om inget alternativ är valt.
Se Pen Inderminate Radio Buttons av Geoff Graham (@geoffgraham) på CodePen.
Vi bör notera att användning :indeterminatekanske inte är det bästa valet vad gäller användarupplevelsen.
Obestämda framstegsfält
Vi kan också ansöka :indeterminatetill elementet där inget värde har explicit i HTML. Det finns inget behov av Javascript, men att utforma elementet är i sig en knepig sak som kräver mycket arbete och övervägande för konsistens mellan webbläsare.
Se Pen Indeterminate Progress Element av Geoff Graham (@geoffgraham) på CodePen.
Webbläsarstöd
Denna webbläsares supportdata kommer från Caniuse, som har mer detaljer. Ett nummer indikerar att webbläsaren stöder funktionen i den versionen och uppåt.
Skrivbord
| Krom | Firefox | IE | Kant | Safari |
|---|---|---|---|---|
| 39 | 51 | 11 | 79 | 10.1 |
Mobil / surfplatta
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 10.3 |
Mer information
- CSS-väljare nivå 4 arbetsutkast
- Obestämda kryssrutor
- Obestämda radioknappar
- HTML5-framstegselement