Bagaimana untuk Mencipta Butang \"Carian\" Tersuai dengan Ikon Kaca Pembesar?

Memperindahkan Medan Input Teks dengan Butang "Carian" Tersuai

Untuk mencipta elemen carian yang serupa dengan yang dilihat pada tapak web tertentu, ikuti langkah berikut:

Membuat Struktur Asas:

1. Kod medan input teks:

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

2. Sertakan tag untuk memegang imej kaca pembesar:

<code class="html"><span id="g-search-button"></span></code>

Menambah Imej Kaca Pembesar:

Untuk memasukkan imej kaca pembesar, tetapkan ia menggunakan latar belakang CSS -sifat imej:

<code class="css">#g-search-button {
  background-color: black;  /* Replace with your own image */
}</code>

Kedudukan dan Penggayaan:

Untuk meletakkan imej dalam medan input teks:

<code class="css">#g-search-button {
  position: relative;
  left: -22px;
  top: 3px;
  width: 16px;
  height: 16px;
}</code>

Ini meletakkan imej sedikit ke kiri, bertindih di tepi kanan kotak carian.

Penyesuaian:

Ubah suai rupa butang dengan melaraskan nilai dalam #g -blok CSS butang carian, termasuk warna latar belakang, saiz dan kedudukan.

Contoh dalam Tindakan:

Rujuk contoh JSBin berikut untuk melihat berfungsi sepenuhnya pelaksanaan elemen carian:

[Demo JSBin](https://jsbin.com/xahepu/edit?html,css,output)

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Butang \"Carian\" Tersuai dengan Ikon Kaca Pembesar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!