วิธีเปลี่ยนสีตัวอักษร placeholder HTML5

สอนวิธีเปลี่ยนสีตัวอักษรของ placeholder ภาษา HTML5 ด้วยคำสั่งของภาษา CSS สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง ช่องใส่ข้อมูลพร้อม placeholder

<input id="search_txt" type="text" placeholder="ค้นหาสินค้า">

ตัวอย่าง เปลี่ยนสีตัวอักษรส่วน placeholder สำหรับ id #search_txt

#search_txt::placeholder { /* สำหรับ Chrome, Firefox, Opera, Safari */
  color: blue;
  opacity: 1;
}
#search_txt:-ms-input-placeholder { /* สำหรับ Internet Explorer */
  color: blue;
}
#search_txt::-ms-input-placeholder { /* สำหรับ Microsoft Edge */
  color: blue;
}

ตัวอย่าง เปลี่ยนสีอักษรส่วน placeholder ทั้งหมดในเว็บไซต์

::placeholder { /* สำหรับ Chrome, Firefox, Opera, Safari */
  color: blue;
  opacity: 1;
}
:-ms-input-placeholder { /* สำหรับ Internet Explorer */
  color: blue;
}
::-ms-input-placeholder { /* สำหรับ Microsoft Edge */
  color: blue;
}