CSS3: अनियंत्रित छद्म वर्ग

Question

मुझे पता है कि एक आधिकारिक CSS3 :checkedछद्म वर्ग है, लेकिन क्या एक :uncheckedछद्म वर्ग है, और क्या उनके पास समान ब्राउज़र समर्थन है?

साइटपॉइंट के संदर्भ में एक का उल्लेख नहीं है, हालांकि यह व्हाट्सएप कल्पना (जो भी है) करता है।

मैं जानता हूँ कि जब एक ही परिणाम प्राप्त किया जा सकता :checkedहै और :not()छद्म कक्षाएं जोड़ दिया जाता है, लेकिन मैं अभी भी उत्सुक हूँ:

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

संपादित करें:

W3c उसी तकनीक की सिफारिश करता है

एक अनियंत्रित चेकबॉक्स को नकारात्मक छद्म वर्ग का उपयोग करके चुना जा सकता है:

:not(:checked)

Answer 1

:unchecked चयनकर्ताओं या CSS UI स्तर 3 स्पेक्स में परिभाषित नहीं है, और न ही यह चयनकर्ताओं के स्तर 4 में दिखाई दिया है।

वास्तव में, डब्ल्यू 3 सी से बोली चयनकर्ताओं 4 कल्पना से ली गई है । चूंकि चयनकर्ता 4 का उपयोग करने की अनुशंसा करता है :not(:checked), इसलिए यह मान लेना सुरक्षित है कि कोई संबंधित :uncheckedछद्म नहीं है। ब्राउज़र समर्थन :not()और :checkedसमान है, ताकि कोई समस्या न हो।

यह :enabledऔर :disabledराज्यों के साथ असंगत लग सकता है , खासकर जब से एक तत्व को न तो सक्षम किया जा सकता है और न ही अक्षम (यानी शब्दार्थ पूरी तरह से लागू नहीं होता है), हालांकि इस असंगति के लिए कोई स्पष्टीकरण नहीं दिखता है।

( :indeterminateगणना नहीं करता है, क्योंकि एक तत्व इसी तरह न तो अनियंत्रित हो सकता है, न ही चेक किया जा सकता है और न ही अनिश्चित हो सकता है क्योंकि शब्दार्थ लागू नहीं होता है।)

Comments

बस इस उत्तर को जोड़ने के लिए कि चयन करना: नहीं (: चेक किया गया) क्रोम पर पूरी तरह से काम करता है, लेकिन यह IE (9 और 11 पर परीक्षण) पर नहीं है।

— ब्रूनो फिंगर

@ ब्रूनो फिंगर:: चेक किया गया और: नहीं (: चेक किया गया) दोनों को IE पर काम करना चाहिए, सिवाय उन दोनों को एक बग से समान रूप से प्रभावित किया जाए जहां चेक की गई स्थिति को बदलने से चेक किए गए / अनियंत्रित के संबंध में लक्षित किए जा रहे तत्वों की शैली अपडेट नहीं होती है तत्व।

— BoltClock

Answer 2

मुझे लगता है कि आप जटिल चीजों को खत्म करने की कोशिश कर रहे हैं। एक सरल उपाय यह है कि आप अनचाहे स्टाइल के साथ डिफ़ॉल्ट रूप से अपने चेकबॉक्स को स्टाइल करें और फिर चेक किए गए स्टेट स्टाइल को जोड़ें।

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

मैं एक पुराने सूत्र को लाने के लिए माफी माँगता हूँ, लेकिन लगा कि यह एक बेहतर उत्तर का उपयोग कर सकता है।

EDIT (3/3/2016):

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करने के लिए उपयोग करने की आवश्यकता होगी border: none;।

input[type="checkbox"]डुप्लिकेट को कम करने के लिए बेस स्टाइलिंग के लिए उपयोग करें ।

input[type="checkbox"]:not(:checked)स्पष्ट अनियंत्रित शैलियों के लिए उपयोग करें जिन्हें आप चेक किए गए राज्य पर लागू नहीं करना चाहते हैं।

Comments

सीएसएस चयनकर्ताओं जहां यह उपयोगी है के अन्य उपयोगों हैं / हालांकि अर्थपूर्ण: जावास्क्रिप्ट, स्वचालित ब्राउज़र का परीक्षण

— nruth

यह हमेशा संभव नहीं है। विशेष रूप से तत्व ऐसे हैं जो आपको उनके डिफ़ॉल्ट रूप में वापस लाने और कैस्केडिंग नियमों के माध्यम से महसूस करने के लिए कुख्यात हैं। (हालांकि क्यों किसी को केवल चिह्नित किया है या केवल अनियंत्रित आदानों एक कस्टम रंगरूप देने के लिए चाहते हो जाएगा, जबकि अन्य टकसाल छोड़ने मुझे परे है।)

— BoltClock

एक और मामला जहां यह संभव नहीं है: 2 से अधिक रेडियो बटन। उदाहरण के लिए, आप एक स्टाइल चाहते हो सकते हैं जब विकल्प # 1 है: चेक किया गया और दूसरा जब कुछ भी हो: चेक किया गया इसका समाधान है:not(:checked)

— नवीन

आप स्टाइल केवल चाहने विशिष्ट लोगों को चाहने रहे थे, तो क्यों एक का उपयोग नहीं :first-child, :last-childया :nth-childके साथ संयोजन में चयनकर्ता :checked। :not(:checked)जब तक मैं आपकी टिप्पणी को गलत नहीं समझ रहा हूँ, आपके द्वारा निर्दिष्ट स्थिति को कवर नहीं किया जाएगा।

— माइकल स्ट्रैमल

@MichaelStramel html का क्रम सीएसएस में डाल रहा है? nope धन्यवाद

— inetphantom

Answer 3

यदि आप उपयोग करते हैं तो कोई अनियंत्रित छद्म वर्ग नहीं है: चेक किए गए छद्म वर्ग और भाई के चयनकर्ता आप दोनों राज्यों के बीच अंतर कर सकते हैं। मेरा मानना ​​है कि सभी नवीनतम ब्राउज़र समर्थन करते हैं: चेक किया गया छद्म वर्ग, आप इस संसाधन से अधिक जानकारी पा सकते हैं: http://www.whatstyle.net/articles/18/pretty_form_controls_with_css

आपका jquery के साथ बेहतर ब्राउज़र समर्थन प्राप्त करने जा रहा है ... आप क्लिक होने पर पता लगाने के लिए एक क्लिक फ़ंक्शन का उपयोग कर सकते हैं और यदि इसकी जाँच की गई है या नहीं, तो आप एक क्लास जोड़ सकते हैं या आवश्यक के रूप में एक क्लास हटा सकते हैं ...

Answer 4

जिस तरह से मैंने इसे संभाला वह एक शर्त के आधार पर एक लेबल के क्लासनाम को स्विच कर रहा था। इस तरह से आपको केवल एक लेबल की आवश्यकता है और आपके पास विभिन्न राज्यों के लिए अलग-अलग कक्षाएं हो सकती हैं ... आशा है कि मदद करता है!