: tak tentu - Trik CSS

Anonim

:indeterminateadalah pemilih pseudo-class di CSS yang dinamai untuk status yang tidak dicentang atau tidak dicentang. Di antara keadaan itulah kita dapat mempertimbangkan "Mungkin" antara opsi "Ya" dan "Tidak". Negara bagian tidak sepenuhnya ditentukan, oleh karena itu namanya: tak tentu.

Kotak centang tak tentu

Tempat paling umum yang mungkin kita lihat dalam permainan ini adalah dengan kotak centang dalam bentuk:

Batasi sebagai status kotak centang ketiga

Ada beberapa hal unik tentang :indeterminatekotak centang yang perlu diperhatikan sebelum menggali bagaimana itu dapat dipilih di CSS.

Ini tidak dapat diatur dalam HTML

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

Masuk akal untuk mengasumsikan bahwa kita dapat melakukan hal yang sama dengan keadaan tidak pasti:

Tapi, sayangnya, bukan itu masalahnya jadi jangan gunakan contoh terakhir itu dalam kode Anda.

Pada saat penulisan ini, Javascript adalah satu-satunya cara untuk menyetel status tak tentu pada kotak centang. Salah satu cara untuk melakukannya adalah dengan memilih kotak centang tertentu berdasarkan ID:

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

Batasan dari contoh di atas adalah bahwa kotak centang tidak akan pernah bisa kembali ke keadaan tak tentu setelah berubah ke keadaan lain. Sebagai gantinya, kita dapat merotasi antara status yang dicentang, tidak dicentang, dan tidak dapat ditentukan:

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

Lihat Status Kotak Centang Pen Rotate oleh Geoff Graham (@geoffgraham) di CodePen.

Ini murni keadaan visual

Kotak centang masih hanya menghitung apakah telah dicentang atau tidak, terlepas dari apakah kami telah mengaktifkan status tak tentu. Dengan kata lain, indeterminate menutupi nilai sebenarnya dari kotak centang dan tidak dihitung sebagai nilainya sendiri.

Tampilan defaultnya tidak konsisten di semua browser

Seperti input numerik, keadaan tak tentu tidak selalu bergaya secara konsisten di setiap browser.

Perbandingan tentang bagaimana render tak tentu di beberapa browser berbeda

Namun secara keseluruhan, berikut ini adalah dukungan untuk kotak centang tak tentu.

Data dukungan browser ini berasal dari Caniuse, yang lebih detail. Angka menunjukkan bahwa browser mendukung fitur pada versi tersebut dan yang lebih baru.

Desktop

Chrome Firefox YAITU Tepi Safari
28 3.6 6 12 6

Ponsel / Tablet

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

Tombol Radio Tidak Pasti

:indeterminate dapat diterapkan ke tombol radio di tingkat grup, di mana seluruh grup dianggap dalam keadaan tidak pasti jika tidak ada opsi yang dipilih.

Lihat Tombol Radio Tak Tertentu Pena oleh Geoff Graham (@geoffgraham) di CodePen.

Kami harus mencatat bahwa menggunakan :indeterminatemungkin bukan pilihan terbaik sejauh pengalaman pengguna berjalan.

Bilah Kemajuan Tidak Pasti

Kami juga dapat menerapkan :indeterminateke elemen di mana tidak ada nilai yang secara eksplisit diatur dalam HTML. Tidak perlu Javascript, tetapi menata elemen itu sendiri merupakan hal rumit yang membutuhkan banyak pekerjaan dan pertimbangan untuk konsistensi lintas browser.

Lihat Elemen Kemajuan Tak Tertentu Pena oleh Geoff Graham (@geoffgraham) di CodePen.

Dukungan Browser

Data dukungan browser ini berasal dari Caniuse, yang lebih detail. Angka menunjukkan bahwa browser mendukung fitur pada versi tersebut dan yang lebih baru.

Desktop

Chrome Firefox YAITU Tepi Safari
39 51 11 79 10.1

Ponsel / Tablet

Android Chrome Android Firefox Android iOS Safari
88 85 81 10.3

Informasi Lebih Lanjut

  • Draf Kerja Pemilih CSS Level 4
  • Kotak centang tak tentu
  • Tombol Radio Tidak Pasti
  • Elemen Kemajuan HTML5