Salam hangat teman-teman, semoga teman-teman sehat selalu ya, Kali ini saya akan mencoba membagi Cara Menyesipkan Icon Pada Tag Input.
Teman-teman pasti pernah login di dalam suatu website, nah di dalam form loginnya seringkali teman-teman melihat berbagai macam form seperti terdapat icon pada tag input.
Nah, Sekarang saya akan Menyesipkan Icon Pada Tag Input sebagai contoh saja. Berikut tutorial singkat tentang Cara Menyesipkan Icon Pada Tag Input:
– Pertama teman-teman download dulu font-awesome untuk mengambil icon yang kita akan pakai dan simpan satu folder dengan index.html.
– Kedua teman-teman buat struktur dasar HTML-nya dulu bawah ini :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<!DOCTYPE html> <html> <head> <title>Flat payment icon</title> <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="container"> <form action="#"> <div> <label for="email">Nama Pengguna</label> <div class="input-icon"> <input type="email" name="email" id="email" /> <i class="fa fa-user"></i> </div> </div> <div> <label for="password">Kata Sandi</label> <div class="input-icon"> <input type="password" name="password" id="password" /> <i class="fa fa-key"></i> </div> </div> <div> <button><i class="fa fa-sign-in"></i> Masuk </button> </div> </form> </div> </body> </html> |
Di index saya sudah memberikan link css dan link font awesomenya. Apabila teman-teman bua di browser maka tampilannya akan menjadi seperti ini:
– Ketiga teman-teman ketikan css-nya untuk menyisipkan icon dan mempercantik tampilannya:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
body{ font-family:"Trebuchet MS", Helvetica, sans-serif; font-size:1em; } body .container{ padding: 15px; background-color: #20989a; border: 1px solid #806767; position: absolute; top: 50%; left: 50%; width: 300px; margin-left: -150px; height: 160px; margin-top: -80px; } /**Menyisipkan icon di form input dan memberi lebar pada form**/ form,form .input-icon{width:100%;} form .input-icon{position:relative;} form input{ border:1px solid #eee; border-radius:2px; color:#777; outline:none; margin-top:3px; margin-bottom:6px; font-size:inherit; display:block; padding:8px; padding-left:30px; width:100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } /**Mengatur posisi icon di dalam form**/ form input+i{ position:absolute; left:7px; top:10px; color:#777; } form input:focus{border:1px solid #0099ff;color:#000} form input:focus+i{color:#0099ff;} form>div:last-child{ display:inline-block; width:100%; } button{ padding: 7px 10px; border: 0px solid #cdcdcd; background-color: #47CD1A; color: #fff; font-family: inherit; float: right; } |
Nah, coba teman-teman buka lagi di browser maka tampilannya akan menjadai seperti ini:
Bagaimana teman-teman cukup mudahkan Menyesipkan Icon Pada Tag Input.
Sekian artikel saya hari ini tentang Cara Menyesipkan Icon Pada Tag Input.
Sehat selalu ya teman-teman, selamat mencoba.