พิวโดคลาส valid

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

ไวยากรณ์

ตัวเลือก:valid {
	
}

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

<p>ป้อนอีเมลของคุณ</p>
<p><input type="email"></p>

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

พิวโดคลาส :invalid,
ซึ่งกำหนดสไตล์ให้อินพุตที่ป้อนค่าผิด
พิวโดคลาส :out-of-range,
ซึ่งกำหนดสไตล์ให้องค์ประกอบที่มีค่าออกนอกช่วงที่กำหนด
พิวโดคลาส :in-range,
ซึ่งกำหนดสไตล์ให้องค์ประกอบที่มีค่าภายในช่วงที่กำหนด