จัดสไตล์ Placeholder Text ด้วย Pseudo-element ::placeholder
ใช้ ::placeholder (standard) ร่วมกับ vendor prefixes สำหรับบราว์เซอร์เก่า เพื่อเปลี่ยนสี ขนาด ฟอนต์ ของ placeholder text ใน input/textarea
โค้ดตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; padding: 20px; }
input { font-size: 40px; font-weight: bold; }
::placeholder { color: rgb(70, 53, 167); } /* Standard */
:-ms-input-placeholder { color: rgb(66, 51, 155); } /* IE 10-11 */
::-ms-input-placeholder { color: rgb(122, 69, 182); } /* Edge (legacy) */
</style>
</head>
<body>
<h1>ตัวอย่างเปลี่ยนสี Placeholder</h1>
<input type="text" placeholder="Some placeholder text" />
</body>
</html>Browser Support
- ::placeholder – Chrome 57+, Firefox 51+, Safari 10+, Edge 79+
- :-ms-input-placeholder – IE 10-11
- ::-ms-input-placeholder – Edge (Legacy, ก่อน Chromium)
- ::-webkit-input-placeholder – Chrome/Safari เก่า (ไม่จำเป็นตอนนี้)
สไตล์เพิ่มเติมที่ทำได้
::placeholder {
color: #999;
font-style: italic;
font-size: 0.9em;
opacity: 1; /* Firefox default opacity < 1 */
}หมายเหตุ: opacity บน Firefox default ต่ำกว่า 1 ต้องตั้งค่าเป็น 1 ถ้าต้องการสีเต็มที่
