จัดสไตล์ <input> ที่มีค่า valid ด้วย CSS :valid Selector

ใช้ CSS :valid selector เพื่อจัดสไตล์ทุก <input> element ที่มีค่า valid (ถูกต้องตามประเภท)

ตัวอย่าง

ลองรันโค้ดด้านล่างเพื่อใช้งาน :valid Selector:

<!DOCTYPE html>
<html>
  <head>
    <style>
      input:valid {
        background: red;
        color: white;
      }
    </style>
  </head>
  <body>
    <h2>Heading</h2>
    <input type="email" value="amit@example.com">
    <p>สไตล์ (พื้นหลังสีแดง) จะปรากฏเมื่อคุณพิมพ์อีเมลที่ถูกต้อง/valid</p>
  </body>
</html>

ผลลัพธ์