พีวดูคลาส placeholder-shown

พีวดูคลาส placeholder-shown กำหนดสไตล์ให้กับ อินพุตหรือเท็กซ์แอเรีย ที่กำลังแสดง สิ่งที่เรียกว่าข้อความคำแนะนำ ซึ่งจะหายไปหลังจากเริ่ม ป้อนข้อความ

ไวยากรณ์

cssตัวเลือก:placeholder-shown {}

ตัวอย่าง

มาลองตั้งค่าขอบสีแดงให้กับอินพุต ที่กำลังแสดงข้อความคำแนะนำ และหลังจาก ผู้ใช้ป้อนข้อความแล้ว ขอบจะเปลี่ยนเป็น สีเขียว:

html<form>
  <input placeholder="enter the text">
</form>

cssinput {
  border: 1px solid green;
}
input:placeholder-shown {
  border-color: red;
}

Результат:

ดูเพิ่มเติม