: tidak tentu - Trik CSS

:indeterminateadalah pemilih kelas pseudo dalam CSS yang dinamakan untuk keadaan yang tidak dicentang atau tidak dicentang. Keadaan di antara inilah kita mungkin mempertimbangkan opsi "Mungkin" antara opsi "Ya" dan "Tidak". Negeri tidak ditentukan sepenuhnya, oleh itu namanya: tidak tentu.

Kotak Semak Tidak Tentu

Tempat yang paling biasa kita lihat dalam permainan ini adalah dengan kotak pilihan dalam bentuk:

Terdapat beberapa perkara yang pelik :indeterminateketika datang ke kotak centang yang perlu diperhatikan sebelum menggali bagaimana ia dapat dipilih dalam CSS.

Ia tidak boleh ditetapkan dalam HTML

Pertama, tidak ada cara untuk menetapkan kotak centang ke keadaan tidak tentu dalam HTML. Dalam contoh pembukaan di atas, kami dapat menetapkan kotak centang kedua untuk dicentang dengan mengatakannya secara eksplisit dalam HTML.

Adalah logik untuk menganggap kita dapat melakukan hal yang sama dengan keadaan tidak tentu:

Tetapi, sayangnya, itu tidak berlaku, jadi jangan gunakan contoh terakhir dalam kod anda.

Pada masa penulisan ini, Javascript adalah satu-satunya cara untuk menetapkan keadaan tidak tentu pada kotak pilihan. Salah satu cara untuk menyelesaikannya adalah dengan memilih kotak pilihan tertentu berdasarkan ID:

var checkbox = document.getElementById("some-checkbox"); checkbox.indeterminate = true;

Batasan contoh di atas adalah bahawa kotak centang tidak dapat kembali ke keadaan tidak tentu setelah ia berubah ke keadaan lain. Sebagai gantinya, kita dapat memutar antara keadaan yang dicentang, tidak dicentang dan tidak tentu:

function toggle(demo) ( if (demo.readOnly) demo.checked=demo.readOnly=false; else if (!demo.checked) demo.readOnly=demo.indeterminate=true; )

Lihat keadaan kotak Pen Rotate oleh Geoff Graham (@geoffgraham) di CodePen.

Ia adalah keadaan visual semata-mata

Kotak centang masih hanya mengira sama ada ia telah dicentang atau tidak dicentang, tidak kira sama ada kita telah mengaktifkan keadaan tidak tentu. Dengan kata lain, tidak tentu menutup nilai sebenar kotak semak dan tidak dikira sebagai nilai sendiri.

Penampilannya secara lalai tidak konsisten di penyemak imbas

Seperti input berangka, keadaan tidak tentu tidak memberi gaya secara konsisten di setiap penyemak imbas.

Secara keseluruhan, bagaimanapun, inilah sokongan untuk kotak pilihan yang tidak ditentukan.

Data sokongan penyemak imbas ini berasal dari Caniuse, yang mempunyai lebih terperinci. Nombor menunjukkan bahawa penyemak imbas menyokong ciri pada versi dan ke atas.

Desktop

Chrome	Firefox	IE	Hujung	Safari
28	3.6	6	12	6

Mudah Alih / Tablet

Android Chrome	Android Firefox	Android	Safari iOS
88	85	4.4	12.2-12.4

Butang Radio Tidak Tentu

:indeterminate boleh digunakan untuk butang radio di peringkat kumpulan, di mana keseluruhan kumpulan dianggap berada dalam keadaan tidak tentu jika tidak ada pilihan yang dipilih.

Lihat Butang Radio Pen Inderminate oleh Geoff Graham (@geoffgraham) di CodePen.

Kita harus perhatikan bahawa penggunaan :indeterminatemungkin bukan pilihan terbaik sejauh pengalaman pengguna.

Bar Kemajuan Tidak Tentu

Kami juga boleh memohon :indeterminatekepada unsur di mana tiada nilai telah jelas ditetapkan dalam HTML. Tidak perlu Javascript, tetapi menggayakan elemen itu sendiri adalah perkara yang sukar yang memerlukan banyak kerja dan pertimbangan untuk konsistensi lintas penyemak imbas.

Lihat Elemen Kemajuan Pen Indeterminate oleh Geoff Graham (@geoffgraham) di CodePen.

Sokongan Penyemak Imbas

Data sokongan penyemak imbas ini berasal dari Caniuse, yang mempunyai lebih terperinci. Nombor menunjukkan bahawa penyemak imbas menyokong ciri pada versi dan ke atas.

Desktop

Chrome	Firefox	IE	Hujung	Safari
39	51	11	79	10.1

Mudah Alih / Tablet

Android Chrome	Android Firefox	Android	Safari iOS
88	85	81	10.3

Maklumat lanjut

• Draf Kerja Pemilih CSS Tahap 4
• Kotak Semak Tidak Tentu
• Butang Radio Tidak Tentu
• Elemen Kemajuan HTML5