Cara Menggunakan pseudo-element Placeholder Di CSS

Pada kesempatan kali ini saya akan menjelaskan cara menggunakan pseudo-element placeholder di css. perlu teman-teman ketahui, untuk membuat placeholder di suatu komponen form html seperti komponen input text box, teman-teman  bisa menambahkan langsung attribute placeholder beserta dengan nilai nya ke dalam element input html, namun pada contoh pembahasan disini dengan cara lain yaitu dengan memanfaatkan pseudo-element ::placeholder di css. Dengan begitu teman-teman bisa menerapkan style untuk placeholder tersebut dan tidak hanya bisa untuk menerapkan konten dari placeholdernya sama halnya ketika teman-teman terapkan langsung attribute placeholder tersebut kedalam element input form tersebut. Langsung saja tanpa panjang lebar untuk contoh penerapannya teman-teman bisa ikuti tahapan seperti tahapan dibawah ini.

Berikut Tahapannya :

• Teman-teman buat terlebih dahulu satu buah file dengan nama index.html
• Jika sudah selanjutnya ketikan seperti kode berikut :

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Cara Menggunakan pseudo-element Placeholder Di CSS</title>
</head>
<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-size: 1.1em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.container {
  margin: 40px auto;
  max-width: 300px;
  background-color: black;
  padding: 1em;
}

input {
  border: 1px solid #aaa;
  background-color: white;
  padding: 1em;
  margin-bottom: 1em;
  display: block;
  width: 100%;
}

input::-webkit-input-placeholder {
  color: red;
  font-size: 14px;
}

::-moz-placeholder {
  color: red;
  font-size: 14px;
}

:-ms-input-placeholder {
  color: red;
  font-size: 14px;
}

::-webkit-input-placeholder {
  color: red;
  font-size: 14px;
}

::placeholder {
  color: red;
  font-size: 14px;
}	
</style>
<body>
<div class="container">
  <input type="text" placeholder="Isi placeholdernya.. ">
</div>
</body>
</html>

• Jika sudah simpan terlebih dahulu file index.html tersebut dan lihat hasilnya dibrowser teman-teman

Sampai disini penjelasan saya mengenai cara menggunakan pseudo-element placeholder di css, semoga bermanfaat.