Bagaimana untuk Mencipta Butang \"Cari\" Dalam Medan Input Teks?

Mencipta Butang "Carian" dalam Medan Input Teks

Apabila melihat kod sumber tapak web tertentu, anda mungkin melihat "carian " elemen yang terdiri daripada kotak teks diikuti dengan butang "kaca pembesar". Artikel ini akan membimbing anda melalui proses mencipta elemen yang serupa dalam aplikasi web anda.

Mendapatkan Imej "Kaca Pembesar"

Untuk mencipta "kaca pembesar" imej, anda boleh menggunakan ikon SVG atau imej PNG kecil. Terdapat banyak sumber yang tersedia dalam talian di mana anda boleh menemui ikon percuma atau komersial.

Melaksanakan Butang

Setelah anda mempunyai imej, anda boleh memasukkannya ke dalam input teks anda medan menggunakan CSS. Berikut ialah contoh:

<code class="CSS">#g-search-button {
  display: inline-block;
  width: 16px;
  height: 16px;
  position: relative;
  left: -22px;
  top: 3px;

  background-color: black;  /* Replace with your own image */
}</code>

Dalam kod CSS ini:

• paparan: inline-block; membenarkan elemen diletakkan pada baris dengan teks.
• lebar dan ketinggian nyatakan dimensi butang.
• kedudukan: relatif; membolehkan anda melaraskan kedudukan butang secara manual.
• kiri dan atas alihkan butang ke kedudukan yang bertindih di hujung kanan kotak carian.
• warna latar belakang boleh digantikan dengan warna sebenar imej.

Contoh Kerja

JSBin berikut menyediakan contoh kod yang berfungsi: https://jsbin.com/vehobew/edit?html, css,output

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Butang \"Cari\" Dalam Medan Input Teks?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!