Cara Merubah Tampilan Attribut Placeholder Pada Input Text dengan CSS

Cara Merubah Tampilan Attribut Placeholder Pada Input Text dengan CSS - Placeholder merupakan salah satu attribut yang biasa digunakan pada element input bertipe text. Istilah placeholder sendiri mungkin akan terdengar asing bagi sebagian orang hal ini dikarenakan pada umumnya menyebutnya dengan nama watermark.

Watermark sendiri merupakan penyebutan untuk teks yang biasanya muncul pada form input dan akan hilang sendiri ketika form input tersebut aktif atau ketika menerima input dari keyboard. Tujuan dari penggunaan placeholder ini sendiri adalah selain dapat membuat form text input jadi lebih menarik juga dapat memberikan informasi kepada pengguna agar mengisi form text input sesuai dengan fungsinya. Misalkan form input untuk mengisi nama maka harus disi nama, form input alamat maka harus diisikan alamat juga. Untuk lebih jelasnya perhatikan gambar di bawah ini.

Cara Menambahkan Attribut Placeholder Pada Tag HTML

Sebelum membahas mengenai pemberian style pada attribut placeholder dengan CSS, maka terlebih dahulu sobat harus mengetahui tentang tag HTML dasar untuk membuat form input dan cara menambahkan teks placeholder pada form input tersebut.

<input type="text">

Untuk menambahkan placeholder pada text input formatnya adalah sebagai berikut.

<input type="text" placeholder="teks-placeholder">

Silahkan ganti teks-placeholder dengan kata yang sobat inginkan. Misalnya ganti dengan teks atau kata Pencarian.

<input type="text" placeholder="Pencarian">

Memberikan Style Pada Placeholder Text Input dengan CSS

Untuk memberikan style pada placeholder seperti warna teks, ukuran dan jenis font maka selector yang digunakan adalah ::placeholder

::placeholder{
    color: #e1e1e1;
    font-size: 14px;
    font-family: 'Verdana', sans-serif;    
}

Pada kode css di atas jika digunakan maka semua text input yang ada akan mendapatkan style yang sama. Oleh karena itu agar style yang diberikan lebih spesifik kita perlu menambahkan class atau id pada tag input.

<input type="text" class="cari" placeholder="Pencarian">

Maka kode cssnya akan menjadi seperti berikut.

.cari::placeholder{
    color: #e1e1e1;
    font-size: 14px;
    font-family: 'Verdana', sans-serif;    
}

Demikian penjelasan mengenai Cara Merubah Tampilan Attribut Placeholder Pada Input Text dengan CSS. Semoga bisa dengan mudah dipahami. Dan jika ada yang belum dimengerti silahkan tanyakan pada kolom komentar yang ada di bawah.