Pemilih CSS untuk bidang input teks?

371

Bagaimana cara menargetkan bidang input tipe 'teks' menggunakan penyeleksi CSS?

— Yarin
sumber

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