Pemilih CSS untuk bidang input teks?

Jawaban:

674 
input[type=text]

atau, untuk membatasi input teks di dalam formulir

form input[type=text]

atau, untuk membatasi lebih jauh ke bentuk tertentu, dengan asumsi itu memiliki id myForm

#myForm input[type=text]

Perhatikan: Ini tidak didukung oleh IE6, jadi jika Anda ingin mengembangkan untuk IE6 gunakan IE7.js (seperti yang disarankan Yi Jiang) atau mulai menambahkan kelas ke semua input teks Anda.

Referensi: http://www.w3.org/TR/CSS2/selector.html#attribute-selectors

Karena ditentukan bahwa nilai atribut default mungkin tidak selalu dapat dipilih dengan penyeleksi atribut, orang dapat mencoba untuk menutupi kasus-kasus markup lain yang input teksnya diberikan:

input:not([type]), // type attribute not present in markup
input[type=""], // type attribute present, but empty
input[type=text] // type is explicitly defined as 'text'

Tetap ini meninggalkan kasus ketika tipe didefinisikan, tetapi memiliki nilai yang tidak valid dan yang masih jatuh ke type = "text". Untuk mengatasinya kita bisa menggunakan pilih semua input yang bukan salah satu dari tipe yang dikenal lainnya

input:not([type=button]):not([type=password]):not([type=submit])...

Tetapi pemilih ini akan sangat konyol dan juga daftar jenis yang mungkin tumbuh dengan fitur baru yang ditambahkan ke HTML.

Perhatikan: :notpseudo-class hanya didukung dimulai dengan IE9.

Alin Purcaru
sumber
41
+1 untuk mengutip standar aktual daripada beberapa situs web tutorial
Šime Vidas
7
Terima kasih. Saya perhatikan orang-orang mengutip hal pertama yang muncul di Google ... atau w3sekolah.
Alin Purcaru
Ya, itu agak menyebalkan
Šime Vidas
Apakah itu berfungsi di IE6? Untuk solusi lintas-browser saya cenderung lebih suka menambahkan kelas (.input-teks, .input-kirim, dll) itu menyebalkan untuk pengembangan html, tetapi itu membuat css dan javascript sedikit lebih baik.
zzzzBov
1
@MubasharAhmad Saya telah memperbarui jawaban saya dan seperti yang Anda lihat ada solusi hanya jika Anda menargetkan browser di atas IE9.
Alin Purcaru
37

Anda dapat menggunakan pemilih atribut di sini: 

input[type="text"] {
    font-family: Arial, sans-serif;
}

Ini didukung di IE7 dan di atas. Anda dapat menggunakan IE7.js untuk menambahkan dukungan untuk ini jika Anda perlu mendukung IE6.

Lihat: http://reference.sitepoint.com/css/attributeselector untuk informasi lebih lanjut

Yi Jiang
sumber
Hati-hati, font-family generik yang benar adalah sans-serif, tidak san-serif.
Volker E.
14

Saya biasanya menggunakan penyeleksi dalam stylesheet utama saya, kemudian membuat file .js (jquery) ie6 spesifik yang menambahkan kelas ke semua jenis input. Contoh:

$(document).ready(function(){
  $("input[type='text']").addClass('text');
)};

Dan kemudian hanya menduplikasi gaya saya di stylesheet khusus ie6 menggunakan kelas. Dengan begitu markup sebenarnya sedikit lebih bersih.

garrettwinder
sumber
Itu sangat lambat
Hidayt Rahman
8

Anda dapat menggunakan :textSelector untuk memilih semua input dengan jenis teks

Biola yang Bekerja

$(document).ready(function () {
    $(":text").css({    //or $("input:text")
        'background': 'green',
        'color':'#fff'
    });
});

:textadalah ekstensi jQuery dan bukan bagian dari spesifikasi CSS, permintaan menggunakan: teks tidak dapat mengambil keuntungan dari peningkatan kinerja yang disediakan oleh metode DOM querySelectorAll () asli. Untuk kinerja yang lebih baik di browser modern, gunakan [type="text"]saja. Ini akan berhasil IE6+.

$("[type=text]").css({  // or $("input[type=text]")
    'background': 'green',
    'color':'#fff'
});

CSS

[type=text] // or input[type=text] 
{
    background: green;
}
Aamir Shahzad
sumber
2

Saya memiliki bidang input tipe teks dalam bidang baris tabel. Saya menargetkannya dengan kode

.admin_table input[type=text]:focus
{
    background-color: #FEE5AC;
}
Amit Mhaske
sumber
0

Seperti @Amir diposting di atas, cara terbaik saat ini - lintas-browser dan meninggalkan IE6 - adalah menggunakan

[type=text] {}

Tidak ada yang disebutkan spesifisitas CSS yang lebih rendah ( mengapa adalah bahwa penting ?) Sejauh ini, [type=text] fitur 0,0,1,0 bukan 0,0,1,1 dengan input[type=text].

Dari segi kinerja, tidak ada dampak negatif sama sekali.

menormalkan v4.0.0 baru saja dirilis dengan menurunkan spesifisitas pemilih .

Volker E.
sumber
0

Dengan pemilih atribut, kami menargetkan teks jenis input dalam CSS

input[type=text] {
background:gold;
font-size:15px;
 }
Santosh Khalse
sumber
0

masukan [ketik = teks]

Ini akan memilih semua jenis teks input di halaman web.

Navneet Kumar
sumber
-1

Selektor atribut sering digunakan untuk input. Ini adalah daftar pemilih atribut:

[title] Semua elemen dengan atribut title dipilih.

[title = banana] Semua elemen yang memiliki nilai 'pisang' dari atribut title.

[title ~ = banana] Semua elemen yang mengandung 'pisang' dalam nilai atribut title.

[title | = banana] Semua elemen yang nilai atribut title dimulai dengan 'banana'.

[title ^ = banana] Semua elemen yang nilai atribut title dimulai dengan 'banana'.

[title $ = banana] Semua elemen yang nilai atribut title diakhiri dengan 'banana'.

[title * = banana] Semua elemen yang nilai atribut title berisi substring 'banana'.

Referensi: https://kolosek.com/css-selectors/

Nesha Zoric
sumber