Bagaimana untuk Mencipta Butang Carian Dalam Medan Input Teks?

Cara Melaksanakan Butang Carian dalam Medan Input Teks

Untuk meniru elemen carian yang terdapat pada banyak tapak web, anda boleh menggabungkan teks medan input dengan teg span.

Menambah Butang Carian

Balut butang carian dalam teg span:

<code class="html"><span id="g-search-button"><img src="/static/imghwm/default1.png" data-src="magnifying-glass.png" class="lazy" alt="Search"></span></code>

Menggayakan Butang

Untuk meletakkan butang di sebelah kiri input teks, gunakan gaya tersuai:

<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 image URL */
}</code>

Memperoleh Imej Kaca Pembesar

Anda boleh mendapatkan imej kaca pembesar percuma di tapak web seperti IconFinder atau The Noun Project.

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!