Komentar: CSS unik yang unik untuk WebKit dapat mengontrol gaya teks. Dengan efek animasi dan kategori semu CSS3, kami dapat dengan mudah membuat kotak input animasi, yang sangat cocok untuk login sistem, pencarian, dll. Jika Anda tertarik, Anda dapat merujuk ke artikel berikut atau membantu Anda.
Saya sudah lama tidak menulis artikel teknis. Saya telah menggunakan WebKit sebagai operator baru -baru ini. Tentu saja, saya perlu menggunakan HTML5 dan CSS3 dalam jumlah besar, yang tidak hanya mengurangi banyak JS tetapi juga memastikan lebih halus.Ketika kotak dialog dipilih, teks prompt akan menjadi lebih ringan dan menghilang setelah input. Praktik saat ini adalah menambahkan label di belakang tag input. Gunakan kontrol JS.
Setelah HTML5 muncul, kami memiliki pendekatan yang lebih baik.
<input type = "text" placeholder = "nama pengguna atau alamat email"/>
Kami melihat bahwa ada tag placeholder yang dapat digunakan sebagai prompt teks pengguna. Ini sangat nyaman. Tetapi untuk mencapai kesempurnaan terbaik, kita perlu meringankan teks setelah memilihnya, atau memodifikasi gaya file prompt. Apa yang harus kita lakukan?
Input ::-WebKit-Input-PlaceHolder {
Warna: #999;
-webkit-transisi: color.5s;
}
Input: Focus ::-WebKit-Input-PlaceHolder, Input: Hover ::-WebKit-Input-PlaceHolder {
Warna: #C2C2C2;
-webkit-transisi: color.5s;
}
-WebKit-Input-PlaceHolder, CSS unik yang unik untuk Webkit, dapat mengontrol gaya teks di dalamnya. Dengan efek animasi dan kelas semu CSS3, kita dapat dengan mudah membuat kotak input animasi, yang sangat cocok untuk login sistem, pencarian, dan lokasi lainnya. Tentu saja, metode ini tidak akan berfungsi agar kompatibel dengan IE6. Namun, IE9 juga mendukung tag placeholder, tetapi warnanya tidak dapat dimodifikasi.
Jadi, apa yang harus saya lakukan jika tidak didukung? Anda cukup menggunakan jQuery untuk membantu, jadi tidak ada dalam ruang lingkup artikel ini.
Berikan demo, dan alamat demo harus ada di browser Webkit untuk melihat efek penuh. Bukankah itu sangat nyaman?