Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk Mencipta Butang Carian Dalam Medan Input Teks?

Bagaimana untuk Mencipta Butang Carian Dalam Medan Input Teks?

Linda Hamilton
Linda Hamiltonasal
2024-11-01 08:03:02849semak imbas

How to Create a Search Button Inside a Text Input Field?

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="magnifying-glass.png" 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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn