CSS Input Type Selectors - Mungkin memiliki sintaks "atau" atau "tidak"?

101

Jika mereka ada dalam pemrograman),

Jika saya memiliki formulir HTML dengan input berikut:

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

Saya ingin menerapkan gaya ke semua masukan yang berupa type="text"atau type="password".

Atau, saya akan menerima semua masukan di mana type != "checkbox".

Sepertinya saya harus melakukan ini:

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

Apakah tidak ada cara untuk melakukannya:

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

atau

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

Saya telah melihat-lihat, dan sepertinya tidak ada cara untuk melakukan ini dengan satu pemilih CSS.

Bukan masalah besar tentu saja, tapi aku hanya kucing yang penasaran.

Ada ide?

RPM 1984
sumber

Jawaban:

183

CSS3 memiliki pseudo-class yang disebut : 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>


Beberapa pemilih

Seperti yang Vincent sebutkan, dimungkinkan untuk merangkai beberapa :not()s bersama:

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

CSS4, yang belum didukung secara luas , memungkinkan banyak pemilih dalam file:not()

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


Dukungan warisan

Semua browser modern mendukung sintaks CSS3. Pada saat pertanyaan ini diajukan, kami membutuhkan bantuan untuk IE7 dan IE8. Salah satu pilihan adalah dengan menggunakan polyfill seperti IE9.js . Cara lainnya adalah mengeksploitasi cascade di 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
sumber
1
bagus! Terima kasih. apakah pemilih CSS3 itu didukung sepenuhnya? (saya hanya benar-benar peduli tentang IE7 +, FF3 +, Safari terbaru, Chrome terbaru)
RPM1984
1
Ini didukung di IE9 + dan semua browser modern lainnya. quirksmode.org/css/contents.html#t37
Patrick McElhaney
12
Demi kelengkapan jika Anda ingin melakukan beberapa "bukan" maka ini adalah sintaks yang digunakan: input: not ([type = 'checkbox']): not ([type = 'submit'])
Vincent
25
input[type='text'], input[type='password']
{
   // my css
}

Itu adalah cara yang benar untuk melakukannya. Sayangnya CSS bukanlah bahasa pemrograman.

codemonkeh.dll
sumber
4
Anda bisa menggunakan Less CSS atau Sass.
vbullinger
Kurang ya! Aku menyukainya.
Bartłomiej Zalewski