Rumah > hujung hadapan web > tutorial css > Bagaimana untuk Mencipta Butang Carian dalam Medan Input Teks?

Bagaimana untuk Mencipta Butang Carian dalam Medan Input Teks?

DDD
Lepaskan: 2024-11-02 10:15:03
asal
703 orang telah melayarinya

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

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" />
Salin selepas log masuk

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 */
}
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan