Cara Memasukan Icon ke Dalam Form Input HTML dengan CSS

Share:
Cara Memasukan Icon ke Dalam Form Input HTML dengan CSS
Halo semuanya, kembali lagi di sahretech. Pada kesempatan kali ini kita akan belajar bagaimana cara memasukan icon ke dalam sebuah form input. Penasaran?, ayo ikuti langkah-langkahnya di bawah ini.


Cara Memasukan Icon ke Dalam Form Input HTML dengan CSS Seperti di Android

1. Buatlah sebuah dokumen html baru. Lalu ikuti sctipynya seperti gambar di bawah ini. Script di bawah ini cukup simple. Kita hanya membuat sebuah form input text biasa yang sudah menggunakan bootstrap dan menggunakan bootstrap icon. Silahkan jalankan hasilnya untuk melihat tampilan awal sebelum diberi styling.
    
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css"> </head> <body> <div class="container mt-4"> <div class="inner-addon left-addon"> <i class="bi bi-people"></i> <input type="text" class="form-control" placeholder="Type Something..."/> </div> </div> </body> </html>


2. Pada tahap selanjutnya kita perlu menambahkan style css untuk membuat icon berada di dalam form. Ikuti script nya seperti gambar di bawah ini. Lalu tambahkan di atas tag </head>
    
    <style>     .inner-addon {     position: relative; } /* style icon */ .inner-addon .bi {     position: absolute; padding: 10px; pointer-events: none; } /* align icon */ .left-addon .bi { left: 0px; } /* add padding */ .left-addon input { padding-left: 30px; }     </style>


Silahkan kalian lihat hasilnya dan rasakan perbedaanya sebelum dan sesudah ditambahkan kode css. 
Hasil Akhir
Hasil Akhir

Cara pengaplikasiannya cukup mudah, bisa digunakan di berbagai jenis form input lainnya. Kalian juga dapat menggunakan jenis-jenis icon lainnya sesuai dengan kebutuhan.  

SCRIPT LENGKAP

    

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css"> <style> .inner-addon { position: relative; } /* style icon */ .inner-addon .bi { position: absolute; padding: 10px; pointer-events: none; } /* align icon */ .left-addon .bi { left: 0px; } /* add padding */ .left-addon input { padding-left: 30px; } </style> </head> <body> <div class="container mt-4"> <div class="inner-addon left-addon"> <i class="bi bi-people"></i> <input type="text" class="form-control" placeholder="Type Something..."/> </div> </div> </body> </html>
  

Ikuti juga berbagai tips dan trick pendek lainnya tentang design menggunakan CSS dari sahretech di link berikut ini.

Baca Artikel Lain ✨
📰 1. Cara Cepat Membuat Sidebar dengan Bootstrap  read more
📰 2. Membuat Custom Scrollbar yang Cantik dengan CSS  read more
📰 3. Membuat Bottom Navbar Bootstrap Seperti di Mobile App  read more

Sekian tips cepat dan mudah css kali ini, semoga bermanfaat. Jika ada pertanyaan silahkan langsung tanya di kolom komentar di bawah ini atau tanya langsung di fanspage sahretech. Sekian dan terima kasih.

No comments

Jangan lupa kasih komentar ya!. Karena komentar kalian membantu kami menyediakan informasi yang lebih baik

Tidak boleh menyertakan link atau promosi produk saat berkomentar. Komentar tidak akan ditampilkan. Hubungi 081271449921(WA) untuk dapat menyertakan link dan promosi