Dalam manual ini, kami akan menerangkan kaedah berbeza untuk menukar warna ruang letak input menggunakan CSS.
Kaedah 1: Tukar Warna Pemegang Tempat Input Menggunakan Pemilih “::placeholder”.
CSS ' :: pemegang tempat ” pemilih digunakan untuk memilih elemen borang dengan teks pemegang tempat. Ia boleh digunakan untuk menukar teks pemegang tempat. Selain itu, anda boleh menggunakan pemilih ini untuk mengubah suai warna pemegang tempat input.
Sintaks
Sintaks ::placeholder adalah seperti berikut:
:: pemegang tempat {
warna : nilai
}
Di tempat ' nilai ”, anda boleh menetapkan warna ruang letak input mengikut pilihan kami.
Mari kita beralih ke contoh praktikal, di mana kita akan menukar warna ruang letak input.
Contoh
Untuk menukar warna pemegang tempat input, pertama, kami akan mencipta elemen input menggunakan tag dan menetapkan jenis input sebagai “ teks ”. Seterusnya, tetapkan teks pemegang tempat input sebagai “ Masuk nama awak ”.
HTML
< badan >< input taip = 'teks' pemegang tempat = 'Masukkan nama anda' >
< / badan >
Output kod yang diberikan ialah:
Warna lalai pemegang tempat input ditunjukkan dalam imej yang diberikan di atas.
Sekarang, kita beralih ke CSS dan menggunakan ' :: pemegang tempat ' untuk mengakses teks pemegang tempat input dan menetapkan warnanya sebagai ' rgb(17, 0, 255) ”.
CSS
:: pemegang tempat {warna : rgb ( 17 , 0 , 255 ) ;
}
Seperti yang anda lihat, warna pemegang tempat input yang ditambah ditukar kepada biru:
Terdapat kaedah lain untuk menukar warna pemegang tempat input. Mari kita semaknya.
Kaedah 2: Tukar Warna Pemegang Tempat Input Menggunakan Elemen Kelas Pseudo '::-webkit-input-placeholder'
“ :: – webkit-input-placeholder ” Elemen kelas pseudo terutamanya mewakili teks pemegang tempat bagi unsur bentuk. Ia boleh digunakan oleh pereka tema dan pembangun untuk menyesuaikan rupa teks pemegang tempat. Selain itu, dengan menggunakan elemen yang ditentukan pengguna boleh mengubah suai warna pemegang tempat input.
Sintaks
Sintaks ::-webkit-input-placeholder diberikan sebagai:
:: -webkit-input-holder {warna : nilai
}
Di tempat ' nilai ”, anda boleh menetapkan warna ruang letak input.
Mari kita beralih ke contoh untuk memahami elemen kelas pseudo yang dibincangkan di atas.
Contoh
Dalam fail CSS, gunakan ' ::-webkit-input-placeholder ” unsur kelas pseudo dan tetapkan nilai warna sebagai “ rgb(255, 13, 13) ”:
:::: -webkit-input-holder {warna : rgb ( 255 , 13 , 13 ) ;
}
Pengeluaran
Di sini, anda boleh melihat bahawa warna lalai ruang letak input ditukar.
Kesimpulan
Warna ruang letak input ditukar dengan menggunakan “ :: pemegang tempat ” pemilih dan “ :: – webkit-input-placeholder ” unsur kelas pseudo. Menggunakan ini, anda boleh menukar warna lalai ruang letak input. Dalam artikel ini, kami telah menerangkan prosedur yang berkaitan dengan menukar warna ruang letak input menggunakan sifat CSS.