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?

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!
} 

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.


4
Anda bisa menggunakan Less CSS atau Sass.
vbullinger

Kurang ya! Aku menyukainya.
Bartłomiej Zalewski
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.