Selektory typu wejścia CSS - Czy można mieć składnię „lub” lub „nie”?

101

Jeśli istnieją w programowaniu),

Jeśli mam formularz HTML z następującymi danymi wejściowymi:

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

Chcę zastosować styl do wszystkich danych wejściowych, które są albo type="text"lub type="password".

Alternatywnie, zadowalałbym się wszystkimi danymi wejściowymi, w których type != "checkbox".

Wygląda na to, że muszę to zrobić:

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

Czy nie ma sposobu, aby to zrobić:

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

lub

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

Rozejrzałem się i wygląda na to, że nie ma sposobu, aby to zrobić za pomocą pojedynczego selektora CSS.

Oczywiście nic wielkiego, ale jestem po prostu ciekawskim kotem.

Jakieś pomysły?

RPM1984
źródło

Odpowiedzi:

183

CSS3 ma pseudoklasę o nazwie : not ()

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>


Wiele selektorów

Jak wspomniał Vincent, możliwe :not()jest połączenie wielu znaków razem:

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

CSS4, który nie jest jeszcze szeroko obsługiwany , pozwala na wiele selektorów w pliku:not()

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


Wsparcie dla starszych wersji

Wszystkie nowoczesne przeglądarki obsługują składnię CSS3. W momencie, gdy zadano to pytanie, potrzebowaliśmy rozwiązania awaryjnego dla IE7 i IE8. Jedną z opcji było użyć PolyFill jak IE9.js . Innym było wykorzystanie kaskady w CSS:

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!
} 
Patrick McElhaney
źródło
1
niezłe! dzięki. czy ten selektor CSS3 jest w pełni obsługiwany? (Naprawdę zależy mi tylko na IE7 +, FF3 +, najnowszym Safari, najnowszym Chrome)
RPM1984,
1
Jest obsługiwany w IE9 + i wszystkich innych nowoczesnych przeglądarkach. quirksmode.org/css/contents.html#t37
Patrick McElhaney
12
Ze względu na kompletność, jeśli chcesz zrobić wiele „nie”, użyj następującej składni: input: not ([type = 'checkbox']): not ([type = 'submit'])
Vincent
25
input[type='text'], input[type='password']
{
   // my css
}

To jest właściwy sposób, aby to zrobić. Niestety CSS nie jest językiem programowania.

codemonkeh
źródło
4
Możesz jednak użyć Less CSS lub Sass.
vbullinger
Mniej, tak! Kocham to.
Bartłomiej Zalewski