Kode Implementasi HTML untuk menambahkan ikon di kotak input transparan

Baru -baru ini saya menulis situs web yang merekomendasikan pengacara ke meja depan. Ada masalah di kotak pencarian di atas. Saya ingin meletakkan ikon pencarian di kotak pencarian, tetapi itu tidak terlalu memuaskan setelah waktu yang lama ...

Tanpa basa -basi lagi, mari kita langsung ke topik:

Ide Dasar

Faktanya, letakkan kotak input dan ikon di belakangnya di div, lalu atur border kotak input ke 0px, dan akhirnya atur border div ke perbatasan luar akhir

Kami akan mengunggah kode secara langsung:

Html:

 <Div class = Search> <Form Action = http: //baidu.com> <input type = Text placeholder = Harap masukkan pengacara atau keahlian yang Anda cari> <span> <a href =#> <img src = img/icon1.png alt => </a> </span> </form> </div>

CSS:

Inilah gaya pengaturan seluruh div di luar

 .search {width: 250px; Tinggi: 35px; Border: 1px solid white; Border-Radius: 30px;}

Berikut ini untuk mengatur panjang dan lebar kotak input di dalamnya, boder adalah 0px, ukuran font di dalamnya, dan perbatasan tidak akan cerah saat diklik (garis: Tidak ada)

Setel transparansi di sini menggunakan rgba() , properti terakhir adalah transparansi (antara 0-1)

 input {lebar: 200px; Tinggi: 35px; Perbatasan: 0; Ukuran font: 14px; Garis Besar: Tidak Ada; latar belakang-warna: RGBA (255, 255, 255, 0); Warna: Putih; font-size: 16px; margin: 0 10px;

Ini adalah artikel tentang kode implementasi HTML menambahkan ikon di kotak input transparan. Untuk konten ikon kotak input transparan HTML yang lebih terkait, silakan cari artikel sebelumnya dari wulin.com atau terus menelusuri artikel terkait di bawah ini. Saya harap semua orang akan mendukung wulin.com di masa depan!