: lalai - Trik CSS

Anonim

The :defaultpemilih pseudo akan sepadan lalai dalam satu kumpulan unsur yang berkaitan, seperti butang radio dalam sekumpulan butang yang dipilih secara lalai, walaupun jika pengguna telah memilih nilai yang berbeza.

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

CSS di atas mensasarkan label datang segera setelah butang radio yang dipilih secara lalai dalam sekumpulan butang radio:

  • merah
  • hijau
  • biru

Label butang radio hijau akan diikuti dengan teks "(default)" dengan warna abu-abu, teks miring dalam penyemak imbas yang menyokong.

  • merah
  • hijau
  • biru

Contohnya termasuk butang kirim lalai dalam sekumpulan butang, pilihan lalai dari menu pop timbul, butang radio yang memiliki checkedatribut yang ditetapkan dalam HTML (seperti yang terlihat pada penyemak imbas yang menyokong), dan kotak centang yang secara default diperiksa.

Lebih Banyak Sumber

  • Demo
  • Halaman MDN di: lalai
  • Spesifikasi W3C CSS3 UI
  • Pemilih W3C Tahap 4

Sokongan Penyemak Imbas

Pelayar yang berbeza mempunyai tahap sokongan yang berbeza. Firefox memberikan sokongan penuh. Penyemak imbas webkit menyokong lalai pada butang tetapi tidak di radio atau kotak centang, dan Opera adalah sebaliknya, menyokongnya pada butang radio dan kotak centang, tetapi tidak pada pengiriman.

  • Opera menyokong :defaultpada kotak pilihan dan butang radio.
  • Penyemak imbas webkit, termasuk Chrome dan Safari, menyokong :defaultbutang kirim
  • Firefox menyokong :defaultpada kotak pilihan, radio DAN menghantar jenis input.
  • Penjelajah internet tidak menyokong :defaultkotak pilihan, radio atau menghantar jenis input.
Chrome Safari Firefox Opera IE Android iOS
10 5 4 10 tiada tiada 5