:placeholder-shown เป็น CSS pseudo-class ที่ใช้ตรวจสอบว่าช่อง input หรือ textarea แสดงผล placeholder อยู่หรือไม่

1<input type="text" placeholder="Enter your name" />

หากเราอยากจัดการแสดงผลให้กับ input กรณีที่ยังแสดง placeholer อยู่ ซึ่งจะเกิดขึ้นได้ในกรณีที่ยังไม่กรอกข้อมูลลงไป สามารถระบุเป็น CSS ผ่าน :placeholder-shown ได้ เช่น

1input:placeholder-shown {
2  color: #fff;
3  background-color: #00cec9;
4}

กรณีที่ต้องการจัดสไตล์ให้กับช่อง input ที่ถูกกรอกข้อมูลแล้ว หรือกล่าวอีกนัยคือเมื่อกรอกข้อมูลแล้ว placeholder จะไม่แสดงผล กรณีนี้ต้องระบุเป็น :not(:placeholder-shown) เช่น

1input:not(:placeholder-shown) {
2  color: #fff;
3  background-color: #00cec9;
4}