เพื่อปรับแต่งสไตล์สำหรับช่องกรอกข้อความที่มี placeholder เราใช้ pseudo-class :placeholder-shown ของ CSS
ตัวอย่างที่ 1: เปลี่ยนสีขอบตามประเภทช่องกรอก
<!DOCTYPE html> <html> <head> <style> input:placeholder-shown { border-color: dodgerblue; } input:nth-of-type(even):placeholder-shown { border-color: olivedrab; } </style> </head> <body> <input type="text" placeholder="dodgerblue"> <input type="email" placeholder="olivedrab"> </body> </html>
ตัวอย่างที่ 2: เปลี่ยนสีพื้นหลังและขอบเมื่อแสดง placeholder
<!DOCTYPE html> <html> <head> <style> input:placeholder-shown { border-color: orange; background: powderblue; } </style> </head> <body> <input type="radio" checked> <input type="email" placeholder="orange"> <input type="text"> </body> </html>
Pseudo-class :placeholder-shown จะทำงานเมื่อ placeholder กำลังแสดงอยู่ (คือช่องกรอกยังว่างเปล่า) ซึ่งแตกต่างจาก ::placeholder ที่ใช้จัดสไตล์ข้อความ placeholder เอง
