พิวโดคลาส invalid

พิวโดคลาส invalid กำหนดสไตล์ สำหรับอินพุตที่ป้อนค่าที่ไม่ถูกต้อง หรือค่าไม่ตรงกับประเภทที่ระบุไว้

ไวยากรณ์

cssselector:invalid {

}

ตัวอย่าง

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

html<p>Enter Your email</p>
<p><input type="email"></p>

cssinput:invalid {
  background: #E37D76;
}
input:valid {
  background: #9DDFA4;
}

Результат:

ดูเพิ่มเติม