Rumah > hujung hadapan web > tutorial css > Bagaimanakah Saya Boleh Membuat Medan Teks Input Boleh Dikosongkan dengan Ikon Dalaman dengan Mudah?

Bagaimanakah Saya Boleh Membuat Medan Teks Input Boleh Dikosongkan dengan Ikon Dalaman dengan Mudah?

Barbara Streisand
Lepaskan: 2024-12-13 20:09:21
asal
442 orang telah melayarinya

How Can I Easily Create a Clearable Input Text Field with an Internal Icon?

Mengosongkan Medan Teks Input dengan Ikon Dalaman

Keperluan untuk mencipta medan teks input dengan ikon di sebelah kanan yang mengosongkan medan adalah elemen reka bentuk biasa. Semasa mencari penyelesaian, kebanyakan hasil hanya menawarkan meletakkan ikon sebagai latar belakang medan input. Artikel ini akan meneroka pendekatan alternatif untuk mencapai kefungsian yang diingini.

Menggunakan Jenis "carian"

Kaedah yang cepat dan cekap untuk mencipta medan teks input yang boleh dikosongkan ialah dengan memberikan jenis "carian" kepada elemen input. Jenis ini disokong secara meluas merentasi penyemak imbas, tetapi perlu diperhatikan bahawa isu keserasian mungkin timbul dalam versi Internet Explorer sebelum 10.

Coretan Kod:

<input type="search">
Salin selepas log masuk

Dengan menetapkan jenis input kepada "cari", ikon kaca pembesar akan muncul di sebelah kanan medan. Mengklik ikon ini akan mengosongkan kandungan medan. Pendekatan mudah ini menyediakan kefungsian yang diingini tanpa memerlukan skrip atau pemalam tambahan.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat Medan Teks Input Boleh Dikosongkan dengan Ikon Dalaman dengan Mudah?. 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