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.
Cara pengaplikasiannya cukup mudah, bisa digunakan di berbagai jenis form
input lainnya. Kalian juga dapat menggunakan jenis-jenis icon lainnya sesuai
dengan kebutuhan.
Ikuti juga berbagai tips dan trick pendek lainnya tentang design menggunakan CSS dari sahretech di link berikut ini.
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