Bagaimana untuk Mencipta Butang Carian dalam Medan Input Teks?

Mencipta Butang Carian dalam Medan Input Teks

Untuk mencapai elemen carian yang dilihat dalam tangkapan skrin yang disediakan, anda memerlukan kedua-dua input teks medan dan elemen span bersebelahan.

Medan input teks boleh dibuat menggunakan kod berikut:

<input type="text" name="q" id="site-search-input" autocomplete="off" value="Search" class="gray" />

Untuk imej kaca pembesar, anda boleh menggunakan sifat imej latar belakang untuk tindih ia dalam elemen span. Selain itu, kedudukan relatif boleh digunakan untuk menjajarkan imej dengan hujung kanan kotak carian.

#g-search-button {
  display: inline-block;
  width: 16px;
  height: 16px;
  position: relative;
  left: -22px;
  top: 3px;

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

Dalam kod CSS, lebar dan tinggi menentukan saiz imej, manakala kiri dan atas sifat meletakkannya berbanding dengan kotak carian. Sifat warna latar belakang boleh digantikan dengan URL imej kaca pembesar yang anda inginkan.

Berikut ialah contoh yang berfungsi pada JSBin untuk ditunjukkan: [Pautan ke Contoh JSBin]

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