: default - Trik CSS

Anonim

The :defaultpemilih palsu akan cocok default dalam kelompok unsur terkait, seperti tombol radio dalam kelompok tombol yang dipilih secara default, bahkan jika pengguna telah memilih nilai yang berbeda.

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

CSS di atas menargetkan label yang muncul segera setelah tombol radio default yang dipilih dalam sekelompok tombol radio:

  • merah
  • hijau
  • biru

Label tombol radio hijau akan diikuti dengan teks "(default)" berwarna abu-abu, teks miring di browser pendukung.

  • merah
  • hijau
  • biru

Contohnya termasuk tombol kirim default dalam sekelompok tombol, opsi default dari menu popup, tombol radio yang checkedatributnya disetel dalam HTML (seperti yang terlihat di browser pendukung), dan kotak centang yang dicentang secara default.

Sumber Daya Lainnya

  • Demo
  • Halaman MDN aktif: default
  • Spesifikasi W3C CSS3 UI
  • Pemilih W3C Level 4

Dukungan Browser

Browser yang berbeda memiliki tingkat dukungan yang berbeda pula. Firefox memberikan dukungan penuh. Browser Webkit mendukung default pada tombol tetapi tidak pada radio atau kotak centang, dan Opera adalah kebalikannya, mendukungnya pada tombol radio dan kotak centang, tetapi tidak pada pengiriman.

  • Opera mendukung :defaultkotak centang dan tombol radio.
  • Browser Webkit, termasuk Chrome dan Safari, mendukung :defaulttombol kirim
  • Firefox mendukung :defaultkotak centang, radio DAN mengirimkan jenis masukan.
  • Internet explorer tidak mendukung :defaultpada kotak centang, radio, atau jenis masukan pengiriman.
Chrome Safari Firefox Opera YAITU Android iOS
10 5 4 10 tidak ada tidak ada 5