Rumah > hujung hadapan web > tutorial css > Bagaimana untuk Mencipta Butang \'Carian\' Tersuai dengan Ikon Kaca Pembesar?

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

Patricia Arquette
Lepaskan: 2024-11-02 10:12:02
asal
996 orang telah melayarinya

How to Create a Custom

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>
Salin selepas log masuk
  1. Sertakan tag untuk memegang imej kaca pembesar:
<code class="html"><span id="g-search-button"></span></code>
Salin selepas log masuk

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

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

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!

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
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan