: predvolené - Triky CSS

Anonim

:defaultVolič pseudo bude zodpovedať východiskovej v skupine spojených prvkov, ako je prepínač v skupine tlačidiel, ktorá je vybraná v predvolenom nastavení, a to aj v prípade, že užívateľ zvolil inú hodnotu.

input(type="radio"):default + label:after ( content: ' (default)'; color: #999; font-style: italic; )

Vyššie uvedený CSS je zameraný na štítok prichádzajúci bezprostredne za predvoleným vybraným prepínačom v skupine prepínačov:

  • červená
  • zelená
  • Modrá

Za štítkom zeleného prepínača bude v podporných prehliadačoch nasledovať text „(predvolené)“ sivým kurzívou.

  • červená
  • zelená
  • Modrá

Príklady zahŕňajú predvolené tlačidlo odoslania v skupine tlačidiel, predvolenú možnosť z rozbaľovacej ponuky, prepínač s checkedatribútom nastaveným v HTML (ako je to viditeľné v podporných prehliadačoch) a začiarkavacie políčka, ktoré sú predvolene začiarknuté.

Ďalšie zdroje

  • Ukážka
  • Stránka MDN na: predvolená
  • Špecifikácie používateľského rozhrania W3C CSS3
  • Selektory W3C úroveň 4

Podpora prehľadávača

Rôzne prehľadávače majú rôzne úrovne podpory. Firefox poskytuje úplnú podporu. Prehliadače Webkit podporujú predvolené tlačidlá, ale nie pomocou prepínačov alebo začiarkavacích políčok, a Opera je inverzná, podporuje ju pomocou prepínačov a začiarkavacích políčok, ale nie pri odosielaní.

  • Opera podporuje :defaultzačiarkavacie políčka a prepínače.
  • Prehliadače Webkit, vrátane Chrome a Safari, podporujú :defaulttlačidlo odoslať
  • Firefox podporuje :defaulttypy začiarkavacieho políčka, rádia A odosielania.
  • Prehliadač Internet Explorer nepodporuje :defaulttypy začiarkavacieho políčka, rádia ani odosielania vstupu.
Chrome Safari Firefox Opera IE Android iOS
10 5 4 10 žiadny žiadny 5