:indeterminateegy ál-osztály választó a CSS-ben, olyan állapotra, amely nincs ellenőrizve és nincs bejelölve. Ez az a köztes állapot, amelyet fontolóra vehetünk a „Lehetséges” között az „Igen” és a „Nem” lehetőségek között. Az állapot nincs teljesen meghatározva, ezért a neve: határozatlan.
Határozatlan jelölőnégyzetek
A leggyakoribb hely, ahol ezt játékban láthatjuk, a következő jelölőnégyzetek:
Van néhány furcsa dolog a :indeterminatejelölőnégyzetekről, amelyeket érdemes megjegyezni, mielőtt belemerülnénk, hogyan lehet kiválasztani a CSS-ben.
Nem állítható be a HTML-ben
Először is, nincs mód arra, hogy a jelölőnégyzetet határozatlan állapotúra állítsuk be a HTML-ben. A fenti nyitó példában be tudtuk állítani a második jelölőnégyzetet bejelölésre, kifejezetten kimondva ezt a HTML-ben.
Csak logikus feltételezni, hogy ugyanezt megtehetjük egy határozatlan állapotban is:
De sajnos nem ez a helyzet, ezért ne használja ezt az utolsó példát a kódjában.
Az írás idején a Javascript az egyetlen eszköz a jelölőnégyzet határozatlan állapotának beállítására. Ennek egyik módja az, ha kiválaszt egy adott jelölőnégyzetet azonosító szerint:
var checkbox = document.getElementById("some-checkbox"); checkbox.indeterminate = true;A fenti példa korlátozása az, hogy a jelölőnégyzet soha nem térhet vissza határozatlan állapotba, ha egy másik állapotra vált. Ehelyett forgathatunk ellenőrzött, nem ellenőrzött és határozatlan állapotok között:
function toggle(demo) ( if (demo.readOnly) demo.checked=demo.readOnly=false; else if (!demo.checked) demo.readOnly=demo.indeterminate=true; )Lásd Geoff Graham (@geoffgraham) Toll forgatása jelölőnégyzetének állapotai a CodePen-en.
Ez pusztán vizuális állapot
A jelölőnégyzet továbbra is csak azt számolja, hogy be van-e jelölve vagy nincs bejelölve, függetlenül attól, hogy aktiváltunk-e határozatlan állapotot. Más szavakkal, a határozatlan elfedi a jelölőnégyzet tényleges értékét, és nem számít saját értéknek.
Az alapértelmezett megjelenés következetlen a böngészők között
A numerikus bemenetekhez hasonlóan a határozatlan állapot nem minden böngészőben áll stílusosan.
Összességében itt van azonban a határozatlan jelölőnégyzetek támogatása.
Ez a böngésző támogatási adat a Caniuse cégtől származik, amely részletesebben szerepel. Egy szám azt jelzi, hogy a böngésző támogatja az adott és újabb verziók szolgáltatásait.
Asztal
| Króm | Firefox | AZAZ | Él | Szafari |
|---|---|---|---|---|
| 28. | 3.6 | 6. | 12. | 6. |
Mobil / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4.4 | 12.2-12.4 |
Határozatlan rádiógombok
:indeterminate alkalmazható a csoportszintű rádiógombokra, ahol az egész csoport határozatlan állapotúnak tekinthető, ha nincs opció kiválasztva.
Lásd Geoff Graham (@geoffgraham) Pen Inderminate Radio Buttons-ját a CodePen-en.
Meg kell jegyeznünk, hogy :indeterminatea felhasználói élmény szempontjából nem lehet a legjobb választás.
Határozatlan haladási sávok
Alkalmazhatjuk azt :indeterminateaz elemet is, ahol a HTML-ben nincs kifejezetten beállítva érték. Nincs szükség Javascriptre, de az elem stílusa maga is trükkös dolog, amely sok munkát és megfontolást igényel a böngészők közötti konzisztencia érdekében.
Lásd: Geoff Graham (@geoffgraham) Pen Indeterminate Progress Eleme a CodePen-en.
Böngésző támogatás
Ez a böngésző támogatási adat a Caniuse cégtől származik, amely részletesebben szerepel. Egy szám azt jelzi, hogy a böngésző támogatja az adott és újabb verziók szolgáltatásait.
Asztal
| Króm | Firefox | AZAZ | Él | Szafari |
|---|---|---|---|---|
| 39 | 51 | 11. | 79 | 10.1 |
Mobil / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81. | 10.3 |
Több információ
- CSS szelektorok 4. szintű munkavázlat
- Határozatlan jelölőnégyzetek
- Határozatlan rádiógombok
- HTML5 Progress Element