CSS3: คลาสหลอกที่ไม่ถูกเลือก

ฉันรู้ว่ามี:checkedคลาสหลอกCSS3 อย่างเป็นทางการแต่มี:uncheckedคลาสหลอกและพวกเขารองรับเบราว์เซอร์เดียวกันหรือไม่

การอ้างอิงของ Sitepointไม่ได้กล่าวถึงอย่างใดอย่างหนึ่งอย่างไรก็ตามข้อมูลจำเพาะ whatwgนี้(อะไรก็ได้) ทำ

ฉันรู้ว่าผลลัพธ์เดียวกันนี้สามารถทำได้เมื่อรวมคลาสหลอก:checkedและ:not()คลาสหลอก แต่ฉันยังอยากรู้อยากเห็น:

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

แก้ไข:

w3c แนะนำเทคนิคเดียวกัน

คุณสามารถเลือกช่องทำเครื่องหมายที่ไม่ได้ทำเครื่องหมายโดยใช้คลาสหลอกเทียม:

:not(:checked)

:unchecked ไม่ได้กำหนดไว้ในข้อกำหนด Selectors หรือ CSS UI ระดับ 3 และไม่ปรากฏในระดับ 4 ของ Selectors

ในความเป็นจริงอ้างจาก W3C จะนำมาจาก Selectors 4 ข้อมูลจำเพาะ เนื่องจากSelectors 4แนะนำให้ใช้:not(:checked)จึงปลอดภัยที่จะสมมติว่าไม่มีการ:uncheckedหลอกที่เกี่ยวข้อง เบราว์เซอร์รองรับ:not()และ:checkedเหมือนกันจึงไม่น่ามีปัญหา

สิ่งนี้อาจดูเหมือนไม่สอดคล้องกับ:enabledและ:disabledสถานะโดยเฉพาะอย่างยิ่งเนื่องจากองค์ประกอบไม่สามารถเปิดใช้งานหรือปิดใช้งานได้ (กล่าวคือไม่มีการใช้ความหมายโดยสมบูรณ์) อย่างไรก็ตามดูเหมือนจะไม่มีคำอธิบายใด ๆ สำหรับความไม่สอดคล้องกันนี้

( :indeterminateไม่นับเนื่องจากองค์ประกอบไม่สามารถยกเลิกการเลือกตรวจสอบหรือไม่ระบุได้ในทำนองเดียวกันเนื่องจากไม่มีการใช้ความหมาย)

ฉันคิดว่าคุณกำลังพยายามเอาชนะสิ่งที่ซับซ้อน วิธีแก้ปัญหาง่ายๆคือเพียงแค่จัดรูปแบบช่องทำเครื่องหมายของคุณตามค่าเริ่มต้นด้วยสไตล์ที่ไม่ได้ทำเครื่องหมายแล้วเพิ่มรูปแบบสถานะที่เลือก

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

ฉันขอโทษที่นำกระทู้เก่ามาใช้ แต่รู้สึกว่าน่าจะใช้คำตอบที่ดีกว่านี้ได้

แก้ไข (3/3/2559):

ข้อมูลจำเพาะ W3C ระบุว่า:not(:checked)เป็นตัวอย่างสำหรับการเลือกสถานะที่ไม่ถูกตรวจสอบ อย่างไรก็ตามนี่เป็นสถานะที่ไม่ได้เลือกไว้อย่างชัดเจนและจะใช้เฉพาะรูปแบบเหล่านั้นกับสถานะที่ไม่ได้ทำเครื่องหมาย สิ่งนี้มีประโยชน์สำหรับการเพิ่มสไตล์ที่จำเป็นเฉพาะในสถานะที่ไม่ถูกเลือกและจะต้องลบออกจากสถานะที่เลือกหากใช้กับinput[type="checkbox"]ตัวเลือก ดูตัวอย่างด้านล่างสำหรับคำชี้แจง

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
}

หากไม่ใช้:not(:checked)ในตัวอย่างด้านบน:checkedตัวเลือกจะต้องใช้ a border: none;เพื่อให้ได้ผลเช่นเดียวกัน

ใช้input[type="checkbox"]สำหรับจัดแต่งทรงผมฐานเพื่อลดความซ้ำซ้อน

ใช้input[type="checkbox"]:not(:checked)สำหรับรูปแบบที่ไม่ได้เลือกไว้อย่างชัดเจนซึ่งคุณไม่ต้องการใช้กับสถานะที่เลือก

ไม่มี: ไม่ได้เลือกคลาสหลอกอย่างไรก็ตามหากคุณใช้คลาสหลอกที่ตรวจสอบแล้วและตัวเลือกพี่น้องคุณสามารถแยกความแตกต่างระหว่างทั้งสองสถานะได้ ฉันเชื่อว่าเบราว์เซอร์ล่าสุดทั้งหมดรองรับคลาสหลอกที่ตรวจสอบแล้วคุณสามารถค้นหาข้อมูลเพิ่มเติมได้จากแหล่งข้อมูลนี้: http://www.whatstyle.net/articles/18/pretty_form_controls_with_css

คุณจะได้รับการสนับสนุนเบราว์เซอร์ที่ดีขึ้นด้วย jquery ... คุณสามารถใช้ฟังก์ชั่นคลิกเพื่อตรวจจับเมื่อเกิดการคลิกและหากตรวจสอบหรือไม่คุณสามารถเพิ่มคลาสหรือลบคลาสได้ตามความจำเป็น ...

วิธีที่ฉันจัดการนี้คือการเปลี่ยน className ของป้ายกำกับตามเงื่อนไข ด้วยวิธีนี้คุณต้องใช้ป้ายกำกับเพียงป้ายเดียวและคุณสามารถมีคลาสต่างๆสำหรับสถานะต่างๆได้ ... หวังว่าจะช่วยได้!