Halo ketemu lagi dengan saya, pada kesempatan kali ini saya akan berbagi tutorial lagi mengenai Cara Mengubah Warna Dan Teks Placeholder Dengan CSS3, Nah bagi kalian yang masih bingung untuk mengubah Warna Dan Teks Placeholder tidak ada salah nya untuk menyimak langkah-langkah nya berikut ini.
Silahkan buka teks editor nya terlebih dahulu kemudian ketikan kode HTML berikut ini.
|
1 2 3 4 5 6 7 8 9 10 |
<!-- Example1 --> <input class="example1" type="text" placeholder="Masukkan text di sini"> <br/> <!-- Example2 --> <input class="example2" type="text" placeholder="Masukkan text di sini"> <br/> <!-- Example3 --> <input class="example3" type="text" placeholder="Masukkan text di sini"> |
Kalo sudah, sekarang ketikan kode CSS berikut 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 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
body{ background: #35A9DB; font-family: roboto; text-align: center; } h1{ color: #fff; } /*Example1*/ .example1::-webkit-input-placeholder{ color: red; } .example1:-moz-input-placeholder{ color: red; } .example1:-ms-input-placeholder{ color: red; } /*Example2*/ .example2{ margin: 10px; font-size: 12pt; padding: 10px; } .example2::-webkit-input-placeholder{ color: blue; } .example2:-moz-input-placeholder{ color: blue; } .example2:-ms-input-placeholder{ color: blue; } /*Example3*/ .example3{ margin: 10px; font-size: 13pt; padding: 10px; background: transparent; color: #fff; font-family: roboto; border: none; } .example3:focus{ outline: none; } .example3::-webkit-input-placeholder{ color: white; } .example3:-moz-input-placeholder{ color: white; } .example3:-ms-input-placeholder{ color: white; } |
Kalo sudah semua diketikan jangan lupa disimpan, kemudian jalankan di browser masing-masing dan lihat hasilnya.
Baik itulah tadi tutorial mengenai Cara Mengubah Warna Dan Teks Placeholder Dengan CSS3, semoga bermanfaat, amin.
Selamat mencoba.