CSS Input Type Selectors - Möglicherweise eine "oder" oder "nicht" -Syntax?


101

Wenn sie in der Programmierung vorhanden sind),

Wenn ich ein HTML-Formular mit folgenden Eingaben habe:

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

Ich möchte einen Stil auf alle Eingaben anwenden, die entweder type="text"oder sind type="password".

Alternativ würde ich mich mit allen Eingaben zufrieden geben, bei denen type != "checkbox".

Es scheint, als müsste ich das tun:

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

Gibt es keine Möglichkeit:

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

oder

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

Ich habe mich umgesehen und es scheint nicht so, als gäbe es eine Möglichkeit, dies mit einem einzigen CSS-Selektor zu tun.

Natürlich keine große Sache, aber ich bin nur eine neugierige Katze.

Irgendwelche Ideen?

Antworten:


183

CSS3 hat eine Pseudoklasse namens : 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>


Mehrere Selektoren

Wie Vincent erwähnte, ist es möglich, mehrere :not()s miteinander zu verbinden:

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

CSS4, das noch nicht weit verbreitet ist , ermöglicht mehrere Selektoren in a:not()

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


Legacy-Unterstützung

Alle modernen Browser unterstützen die CSS3-Syntax. Als diese Frage gestellt wurde, brauchten wir einen Fallback für IE7 und IE8. Eine Möglichkeit bestand darin, eine Polyfüllung wie IE9.js zu verwenden . Eine andere Möglichkeit bestand darin, die Kaskade in CSS auszunutzen:

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
Schön! Vielen Dank. Wird dieser CSS3-Selektor vollständig unterstützt? (Ich interessiere mich nur wirklich für IE7 +, FF3 +, Safari aktuell, Chrome aktuell)
RPM1984

1
Es wird in IE9 + und allen anderen modernen Browsern unterstützt. quirksmode.org/css/contents.html#t37
Patrick McElhaney

12
Der Vollständigkeit halber ist dies die folgende Syntax, wenn Sie mehrere "Nicht" ausführen möchten: Eingabe: nicht ([type = 'checkbox']): not ([type = 'submit'])
Vincent

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

Das ist der richtige Weg. Leider ist CSS keine Programmiersprache.


4
Sie könnten jedoch weniger CSS oder Sass verwenden.
Vbullinger

Weniger ja! Ich liebe es.
Bartłomiej Zalewski
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.