Bagaimanakah Saya Boleh Menggayakan Borang Web dengan Ikon Terbenam Menggunakan CSS?

Menggayakan Borang dengan Ikon Terbenam

Anda mungkin pernah melihat borang web yang menggabungkan ikon dalam medan input untuk meningkatkan pengalaman pengguna. Artikel ini menerangkan cara untuk mencapai kesan ini menggunakan teknik CSS.

Sifat imej latar belakang menetapkan imej latar belakang untuk elemen input, meletakkan ikon seperti yang dikehendaki. Pada masa yang sama, padding-left digunakan untuk mengalihkan kedudukan kursor, memastikan ikon tidak mengganggu input teks.

Sebagai contoh, CSS berikut digunakan untuk mencipta elemen borang seperti yang dilihat dalam tangkapan skrin yang disediakan:

background: url(images/comment-author.gif) no-repeat scroll 7px 7px;
padding-left: 30px;

Pendekatan ini membenamkan ikon dengan berkesan dalam medan input, memberikan bentuk yang estetik dan mesra pengguna reka bentuk.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menggayakan Borang Web dengan Ikon Terbenam Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!