Bagaimanakah Saya Boleh Membenamkan Ikon Dalam Medan Input Menggunakan CSS?

Meletakkan Ikon dalam Elemen Input

Membenamkan ikon ke dalam medan input borang meningkatkan estetika dan kebolehgunaannya. Untuk mencapai matlamat ini, mari kita siasat teknik yang digunakan oleh tapak yang dirujuk.

Imej Latar Belakang dan Padding

Pendekatan ini memanfaatkan CSS untuk menipu penyemak imbas supaya memaparkan ikon. Ia menggabungkan imej latar belakang ke dalam elemen input, menggunakan sifat seperti imej latar belakang dan kedudukan latar belakang.

Serentak, kod tersebut mengubah suai nilai padding-kiri input untuk mengalihkan kedudukan kursor, memastikan ia tidak bertindih dengan ikon. Oleh itu, ikon muncul dalam medan input sambil meninggalkan ruang untuk input pengguna.

Kod Contoh:

Tapak yang disebutkan di atas melaksanakan peraturan CSS berikut untuk mencapai kesan ini:

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

Dalam contoh ini, imej latar belakang bernama comment-author.gif digunakan sebagai ikon, diletakkan 7 piksel dari kiri dan atas elemen input. Nilai padding-left sebanyak 30 piksel menolak kursor ke kanan, memberikan ruang yang cukup untuk kemasukan teks.

Dengan menggabungkan helah CSS ini, adalah mungkin untuk menyepadukan ikon dengan lancar ke dalam elemen input, meningkatkan daya tarikan visual dan pengalaman pengguna borang.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membenamkan Ikon Dalam Medan Input Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!