Dalam manual ini, kami akan menjelaskan berbagai metode untuk mengubah warna placeholder input menggunakan CSS.
Metode 1: Ubah Warna Placeholder Input Menggunakan Selector “::placeholder”
CSS “ ::tempat penampung ” selektor digunakan untuk memilih elemen formulir dengan teks placeholder. Ini dapat digunakan untuk mengubah teks placeholder. Selain itu, Anda dapat menggunakan pemilih ini untuk mengubah warna placeholder input.
Sintaksis
Sintaks dari ::placeholder adalah sebagai berikut:
:: tempat penampung {
warna : nilai
}
Di tempat “ nilai ”, Anda dapat mengatur warna placeholder input sesuai pilihan kita.
Mari beralih ke contoh praktis, di mana kita akan mengubah warna placeholder input.
Contoh
Untuk mengubah warna placeholder input, pertama, kita akan membuat elemen input menggunakan tag dan mengatur jenis input sebagai “ teks ”. Selanjutnya, atur teks placeholder input sebagai “ Memasuki namamu ”.
HTML
< tubuh >< memasukkan Tipe = 'teks' tempat penampung = 'Masukkan nama Anda' >
< / tubuh >
Output dari kode yang diberikan adalah:
Warna default dari placeholder input ditunjukkan pada gambar yang diberikan di atas.
Sekarang, kita pindah ke CSS dan menggunakan “ ::tempat penampung ” untuk mengakses teks placeholder input dan mengatur warnanya sebagai “ rgb(17, 0, 255) ”.
CSS
:: tempat penampung {warna : rgb ( 17 , 0 , 255 ) ;
}
Seperti yang Anda lihat, warna placeholder input yang ditambahkan berubah menjadi biru:
Ada metode lain untuk mengubah warna placeholder input. Mari kita periksa.
Metode 2: Ubah Warna Placeholder Input Menggunakan Elemen kelas semu '::-webkit-input-placeholder'
“ :: - webkit-input-placeholder ” elemen pseudo-class terutama mewakili teks placeholder dari elemen formulir. Ini dapat digunakan oleh desainer dan pengembang tema untuk menyesuaikan tampilan teks placeholder. Selain itu, dengan menggunakan elemen yang ditentukan, pengguna dapat mengubah warna placeholder input.
Sintaksis
Sintaks dari ::-webkit-input-placeholder diberikan sebagai:
:: -webkit-input-placeholder {warna : nilai
}
Di tempat “ nilai ”, Anda dapat mengatur warna placeholder input.
Mari beralih ke contoh untuk memahami elemen kelas semu yang dibahas di atas.
Contoh
Dalam file CSS, gunakan ' ::-webkit-input-placeholder ” elemen pseudo-class dan tetapkan nilai warna sebagai “ rgb(255, 13, 13) ”:
:::: -webkit-input-placeholder {warna : rgb ( 255 , 13 , 13 ) ;
}
Keluaran
Di sini, Anda dapat melihat bahwa warna default dari placeholder input berubah.
Kesimpulan
Warna placeholder input diubah dengan menggunakan tombol “ ::tempat penampung ” pemilih dan “ :: - webkit-input-placeholder ” elemen kelas semu. Dengan ini, Anda dapat mengubah warna default placeholder input. Pada artikel ini, kami telah menjelaskan prosedur yang terkait dengan mengubah warna placeholder input menggunakan properti CSS.