: privzeto - CSS-triki

Anonim

:defaultIzbirnik psevdo bo ujemalo privzeto v skupini povezanih elementov, kot so radijski gumb v skupini gumbov, ki je izbrana privzeto, tudi če je uporabnik izbral drugačno vrednost.

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

Zgornji CSS cilja na oznako, ki prihaja takoj za privzetim izbranim izbirnim gumbom v skupini izbirnih gumbov:

  • rdeča
  • zelena
  • modra

Oznaki zelenega izbirnega gumba bo v podpornih brskalnikih sledilo besedilo »(privzeto)« v sivi barvi, ležeče besedilo.

  • rdeča
  • zelena
  • modra

Primeri vključujejo privzeti gumb za oddajo v skupini gumbov, privzeto možnost v pojavnem meniju, izbirni gumb, ki ima checkedv HTML-ju nastavljen atribut (kot je razvidno iz podpornih brskalnikov), in potrditvena polja, ki so privzeto označena.

Več virov

  • Demo
  • Stran MDN na: privzeto
  • Specifikacije uporabniškega vmesnika W3C CSS3
  • Izbirniki W3C 4. stopnja

Podpora za brskalnik

Različni brskalniki imajo različne ravni podpore. Firefox nudi popolno podporo. Brskalniki Webkit podpirajo privzeto nastavitev na gumbih, ne pa tudi na radiu ali potrditvenih poljih, Opera pa je obratno, podpira jo na izbirnih gumbih in potrditvenih poljih, ne pa tudi pri oddaji.

  • Opera podpira :defaultpotrditvena polja in izbirne gumbe.
  • Brskalniki Webkit, vključno s Chrome in Safari, podpirajo :defaultgumb za oddajo
  • Firefox podpira :defaultpotrditveno polje, radio IN oddaja vrste vnosa.
  • Internet Explorer ne podpira :defaultpotrditvenega polja, radia ali vrste vnosa.
Chrome Safari Firefox Opera IE Android iOS
10. 5. 4. 10. nobenega nobenega 5.