CSS इनपुट प्रकार चयनकर्ता - एक "या" या "नहीं" सिंटैक्स होना संभव है?

101

यदि वे प्रोग्रामिंग में मौजूद हैं),

यदि मेरे पास निम्न जानकारी के साथ HTML फॉर्म है:

<input type="text" />
<input type="password" />
<input type="checkbox" />

मैं सभी इनपुट्स के लिए एक शैली लागू करना चाहता हूं जो type="text"या तो हैं या type="password"।

वैकल्पिक रूप से, मैं सभी इनपुट के लिए तय करूंगा कि कहां है type != "checkbox"।

ऐसा लगता है कि मुझे ऐसा करना होगा:

input[type='text'], input[type='password']
{
   // my css
}

क्या ऐसा करने का कोई तरीका नहीं है:

input[type='text',type='password']
{
   // my css
}

या

input[type!='checkbox']
{
   // my css
}

मैं चारों ओर देख रहा था, और ऐसा नहीं लगता है कि एक एकल सीएसएस चयनकर्ता के साथ ऐसा करने का एक तरीका है।

बेशक कोई बड़ी बात नहीं है, लेकिन मैं सिर्फ एक जिज्ञासु बिल्ली हूं।

कोई विचार?

html css css-selectors

— RPM1984
स्रोत

183

CSS3 में एक छद्म वर्ग कहा जाता है : नहीं ()

input:not([type='checkbox']) {    
    visibility: hidden;
}

<p>If <code>:not()</code> is supported, you'll only see the checkbox.</p>
    	                              
<ul>
  <li>text: (<input type="text">)</li>  
  <li>password (<input type="password">)</li>    	
  <li>checkbox (<input type="checkbox">)</li> 
 </ul>

स्निपेट का विस्तार करें

एकाधिक चयनकर्ता

जैसा कि विन्सेंट ने उल्लेख किया है, कई :not()एस को एक साथ स्ट्रिंग करना संभव है :

input:not([type='checkbox']):not([type='submit'])

CSS4, जो अभी तक व्यापक रूप से समर्थित नहीं है , एक में कई चयनकर्ताओं को अनुमति देता है:not()

input:not([type='checkbox'],[type='submit'])

विरासत का समर्थन

सभी आधुनिक ब्राउज़र CSS3 सिंटैक्स का समर्थन करते हैं। जिस समय यह प्रश्न पूछा गया था, हमें IE7 और IE8 के लिए गिरावट की आवश्यकता थी। एक विकल्प IE9.js जैसे पॉलीफ़िल का उपयोग करना था । एक और सीएसएस में झरना का फायदा उठाने के लिए था:

input {
   // styles for most inputs
}   

input[type=checkbox] {
  // revert back to the original style
} 

input.checkbox {
  // for completeness, this would have worked even in IE3!
}

— पैट्रिक मैकेलेनै
स्रोत

1

अच्छा है! धन्यवाद। क्या CSS3 चयनकर्ता पूरी तरह से समर्थित है? (मैं केवल IE7 +, FF3 +, सफ़ारी हाल, क्रोम हाल के बारे में परवाह करता हूँ)

— RPM1984

1

यह IE9 + और अन्य सभी आधुनिक ब्राउज़रों में समर्थित है। quirksmode.org/css/contents.html#t37

— पैट्रिक McElhaney

12

पूर्णता के लिए यदि आप एकाधिक "नहीं" करना चाहते हैं तो यह उपयोग करने के लिए सिंटैक्स है: इनपुट: नहीं ([प्रकार = 'चेकबॉक्स')): नहीं ([टाइप = 'सबमिट'])

— विंसेंट

25

input[type='text'], input[type='password']
{
   // my css
}

यह करने का सही तरीका है। अफसोस की बात है कि सीएसएस एक प्रोग्रामिंग भाषा नहीं है।

— codemonkeh
स्रोत

4

आप कम CSS या Sass का उपयोग कर सकते हैं, हालाँकि।

— vbullinger

कम, हाँ! मुझे यह पसंद है।

— बार्टोलोमिएज ज़ाल्स्की