Pemilih CSS untuk <input type = “?”

105

Apakah ada cara dengan CSS untuk menargetkan semua input berdasarkan tipenya? Saya memiliki kelas yang dinonaktifkan yang saya gunakan pada berbagai elemen formulir yang dinonaktifkan, dan saya menyetel warna latar belakang untuk kotak teks, tetapi saya tidak ingin kotak centang saya mendapatkan warna itu.

Saya tahu saya bisa melakukan ini dengan kelas terpisah tetapi saya lebih suka menggunakan CSS jika memungkinkan. Saya yakin, saya dapat mengatur ini dalam javascript tetapi sekali lagi mencari CSS.

Saya menargetkan IE7 +. Jadi saya rasa saya tidak bisa menggunakan CSS3.

Edit

Dengan CSS3 saya bisa melakukan sesuatu seperti?

INPUT[type='text']:disabled itu akan lebih baik menyingkirkan kelasku sama sekali ...

Edit

Ok, terima kasih bantuannya! Jadi, inilah pemilih yang memodifikasi semua kotak teks dan area yang telah dinonaktifkan tanpa memerlukan pengaturan kelas apa pun, ketika saya memulai pertanyaan ini, saya tidak pernah berpikir ini mungkin ...

INPUT[disabled][type='text'], TEXTAREA[disabled]
{   
    background-color: Silver;
}

Ini berfungsi di IE7

css internet-explorer css-selectors JoshBerke
sumber
2
Saya telah menulis artikel dengan beberapa info mendetail tentang pemilih atribut CSS.
Sarfraz

Jawaban:

155

Iya. IE7 + mendukung pemilih atribut:

input[type=radio]
input[type^=ra]
input[type*=d]
input[type$=io]

Input elemen dengan tipe atribut yang berisi nilai sama dengan, dimulai dengan, berisi, atau diakhiri dengan nilai tertentu.

Penyeleksi aman (IE7 +) lainnya adalah:

  • Induk> anak yang memiliki: p > span { font-weight: bold; }
  • Didahului oleh ~ elemen yaitu: span ~ span { color: blue; }

Yang <p><span/><span/></p>mana secara efektif akan memberi Anda:

<p>
    <span style="font-weight: bold;">
    <span style="font-weight: bold; color: blue;">
</p>

Bacaan lebih lanjut: Kompatibilitas CSS browser di quirksmode.com

Saya terkejut bahwa semua orang berpikir itu tidak bisa dilakukan. Pemilih atribut CSS telah berada di sini selama beberapa waktu. Saya kira sudah waktunya kita membersihkan file .css kita.

Filip Dupanović
sumber
Ok saya telah mencoba ini tetapi tidak berhasil sekarang berfungsi jadi saya harus memiliki sintaks saya kacau.
JoshBerke
Kau mencerahkan hariku! Sekarang jika Anda ingin membuat minggu saya beri tahu saya itu bisa dilakukan di IE6 tanpa menggunakan Ekspresi hehe :-) j / k di sana
JoshBerke
13
Sayangnya tidak bisa. Saya berhenti mendukung IE6 karena pandangan religius dan menyarankan agar kita semua melakukannya juga. Hari ini saya menggunakan komentar bersyarat IE untuk memberi tahu pengguna bahwa komputer dan privasi mereka berisiko karena menggunakan IE6 dan bahwa mereka harus segera meningkatkan: P
Filip Dupanović
1
Saya kira saya sudah terbiasa mendukung IE6 Saya hanya berasumsi itu tidak akan berfungsi di IE7 juga
TJ L
4
Saya berharap saya bisa berhenti mendukung IE6 tetapi saya tidak bisa dan saya tidak bisa melakukan seperti yang Anda sarankan ... Tapi saya benar-benar sangat berharap saya bisa ;-)
JoshBerke
3

Sayangnya poster lain benar bahwa Anda ... benar-benar seperti yang dikoreksi oleh Kron, Anda ok dengan IE7 Anda dan doc yang ketat, tetapi kebanyakan dari kita dengan persyaratan IE6 dikurangi untuk JS atau referensi kelas untuk ini, tetapi adalah properti CSS2, hanya satu tanpa dukungan yang memadai dari browser IE ^ h ^ h.

Dari kelengkapan, pemilih jenis - mirip dengan xpath - bentuk [attribute=value]tetapi ada banyak varian menarik. Ini akan menjadi sangat kuat bila tersedia, hal yang baik untuk diingat untuk IE8.

annakata
sumber
Anda memiliki referensi dukungan browser yang lebih diperbarui? Itu didasarkan pada IE7 beta ingin melihat IE8
JoshBerke
IE8 masih dalam versi beta, tetapi quirksmode mengatakan "ya": quirksmode.org/css/contents.html
annakata
Saya masih mendukung IE6 hanya saja bukan ini menambahkan tweak visual kecil.
JoshBerke
cukup adil, itu adalah kesalahan saya untuk menjawab berdasarkan judul, saya cenderung menjawab kasus umum - saya benar-benar harus membaca pertanyaan lebih lanjut :)
annakata
1

Anda dapat melakukan ini dengan jQuery. Dengan menggunakan penyeleksi mereka, Anda dapat memilih berdasarkan atribut, seperti tipe. Namun, ini mengharuskan pengguna Anda mengaktifkan Javascript, dan file tambahan untuk diunduh, tetapi jika berfungsi ...

cdeszaq.dll
sumber
0

Maaf, jawaban singkatnya adalah tidak. CSS (2.1) hanya akan menandai elemen DOM, bukan atributnya. Anda harus menerapkan kelas tertentu untuk setiap masukan.

Sialan saya tahu, karena itu akan sangat berguna.

Saya tahu Anda telah mengatakan Anda lebih suka CSS daripada JavaScript, tetapi Anda masih harus mempertimbangkan untuk menggunakan jQuery. Ini menyediakan cara yang sangat bersih dan elegan untuk menambahkan gaya ke elemen DOM berdasarkan atribut.

Phil.Wheeler
sumber
jquery adalah cara untuk melakukan ini, atau hanya JavaScript secara umum
TravisO
4
Afaict, jawaban ini salah (bagian CSS 2.1): w3.org/TR/CSS21/selector.html#attribute-selectors . Jika tidak, maka mohon klarifikasi jawaban Anda.
cic
1
Maaf - Anda benar. Saya hanya berharap sedikit dari IE7 karena seringkali pengembang masih diminta untuk mendukung IE6 pada saat yang bersamaan. Seharusnya membaca pertanyaan lebih hati-hati dan mengerjakan pekerjaan rumah saya.
Phil.Wheeler