CSS3: pseudo-class tidak dicentang

108

Saya tahu ada :checkedpseudo-class resmi CSS3 , tetapi apakah ada :uncheckedpseudo-class, dan apakah mereka memiliki dukungan browser yang sama?

Referensi Sitepoint tidak menyebutkan satu pun, namun spesifikasi whatwg ini (apa pun itu) yang melakukannya.

Saya tahu hasil yang sama dapat dicapai ketika kelas :checkeddan :not()pseudo digabungkan, tetapi saya masih penasaran:

input[type="checkbox"]:not(:checked) {
    /* styles */
}

Edit:

W3c merekomendasikan teknik yang sama

Kotak centang yang tidak dicentang dapat dipilih dengan menggunakan negation pseudo-class:

:not(:checked)
css css-selectors pseudo-class Desainer web
sumber

Jawaban:

104

:unchecked tidak ditentukan dalam spesifikasi Selektor atau CSS UI tingkat 3, juga tidak muncul di tingkat 4 Penyeleksi.

Bahkan, kutipan dari W3C diambil dari spesifikasi Selectors 4 . Karena Selectors 4 merekomendasikan penggunaan :not(:checked), aman untuk mengasumsikan bahwa tidak ada :uncheckedpseudo yang sesuai . Dukungan browser untuk :not()dan :checkedidentik, jadi itu seharusnya tidak menjadi masalah.

Ini mungkin tampak tidak konsisten dengan status :enableddan :disabled, terutama karena sebuah elemen tidak dapat diaktifkan atau dinonaktifkan (yaitu semantik sama sekali tidak berlaku), namun tampaknya tidak ada penjelasan apa pun untuk ketidakkonsistenan ini.

( :indeterminatetidak dihitung, karena sebuah elemen bisa juga tidak dicentang, dicentang, atau tidak dapat ditentukan karena semantik tidak berlaku.)

BoltClock
sumber
Hanya untuk menambah jawaban ini bahwa memilih: tidak (: dicentang) berfungsi dengan sempurna di Chrome, tetapi tidak di IE (diuji pada 9 dan 11).
Bruno Finger
@Bruno Finger:: diperiksa dan: tidak (: dicentang) seharusnya berfungsi di IE, kecuali keduanya sama-sama dipengaruhi oleh bug di mana mengubah status yang dicentang tidak memperbarui gaya elemen yang ditargetkan dalam kaitannya dengan yang dicentang / tidak dicentang elemen.
BoltClock
35

Saya pikir Anda mencoba untuk memperumit masalah. Solusi sederhana adalah dengan hanya mengatur gaya kotak centang Anda secara default dengan gaya yang tidak dicentang dan kemudian menambahkan gaya status yang dicentang.

input[type="checkbox"] {
  // Unchecked Styles
}
input[type="checkbox"]:checked {
  // Checked Styles
}

Saya minta maaf karena mengungkit utas lama tetapi merasa itu bisa menggunakan jawaban yang lebih baik.

EDIT (3/3/2016):

Spesifikasi W3C menyatakan bahwa :not(:checked)sebagai contoh mereka untuk memilih keadaan yang tidak dicentang. Namun, ini secara eksplisit adalah status yang tidak dicentang dan hanya akan menerapkan gaya tersebut ke status yang tidak dicentang. Ini berguna untuk menambahkan gaya yang hanya diperlukan pada keadaan tidak dicentang dan akan perlu dihapus dari keadaan dicentang jika digunakan pada input[type="checkbox"]selektor. Lihat contoh di bawah untuk klarifikasi.

input[type="checkbox"] {
  /* Base Styles aka unchecked */
  font-weight: 300; // Will be overwritten by :checked
  font-size: 16px; // Base styling
}
input[type="checkbox"]:not(:checked) {
  /* Explicit Unchecked Styles */
  border: 1px solid #FF0000; // Only apply border to unchecked state
}
input[type="checkbox"]:checked {
  /* Checked Styles */
  font-weight: 900; // Use a bold font when checked
}

Tanpa menggunakan :not(:checked)contoh di atas, :checkedpemilih perlu menggunakan a border: none;untuk mencapai pengaruh yang sama.

Gunakan input[type="checkbox"]untuk gaya dasar untuk mengurangi duplikasi.

Gunakan input[type="checkbox"]:not(:checked)untuk gaya eksplisit yang tidak dicentang yang tidak ingin Anda terapkan ke status yang dicentang.

Michael Stramel
sumber
Ada kegunaan lain dari pemilih css yang berguna / ekspresif: javascript, pengujian browser otomatis
nruth
2
Ini tidak selalu memungkinkan. Elemen formulir khususnya terkenal karena tidak mengizinkan Anda mengembalikannya ke tampilan dan nuansa default melalui aturan berjenjang. (Meskipun mengapa ada orang yang ingin memberikan hanya masukan yang dicentang atau hanya masukan yang tidak dicentang tampilan dan nuansa khusus sementara meninggalkan permen lain adalah di luar kemampuan saya.)
BoltClock
Kasus lain yang tidak memungkinkan: Lebih dari 2 tombol radio. Misalnya, Anda mungkin menginginkan satu gaya ketika opsi # 1 adalah: dicentang dan gaya lain ketika yang lain: diperiksa. Solusinya adalah:not(:checked)
Navin
Jika Anda ingin hanya ingin orang-orang tertentu ditata, mengapa tidak menggunakan :first-child, :last-childatau :nth-childpemilih dalam kombinasi dengan :checked. :not(:checked)tidak akan mencakup situasi yang Anda tentukan kecuali saya salah memahami komentar Anda.
Michael Stramel
@MichaelStramel meletakkan urutan html ke dalam css? tidak, terima kasih
inetphantom
3

Tidak ada: kelas semu yang tidak dicentang namun jika Anda menggunakan kelas semu: diperiksa dan selektor saudara Anda dapat membedakan antara kedua status. Saya yakin semua browser terbaru mendukung: kelas semu yang diperiksa, Anda dapat menemukan info lebih lanjut dari sumber ini: http://www.whatstyle.net/articles/18/pretty_form_controls_with_css

Anda akan mendapatkan dukungan browser yang lebih baik dengan jquery ... Anda dapat menggunakan fungsi klik untuk mendeteksi kapan klik terjadi dan jika dicentang atau tidak, maka Anda dapat menambahkan kelas atau menghapus kelas seperlunya ...

Jeff Wooden
sumber
-2

Cara saya menangani ini adalah mengganti className label berdasarkan suatu kondisi. Dengan cara ini Anda hanya memerlukan satu label dan Anda dapat memiliki kelas yang berbeda untuk negara bagian yang berbeda ... Semoga membantu!

Daniel Ram
sumber