CSS :valid सेलेक्टर की भूमिका

:valid सेलेक्टर का उपयोग

:valid सेलेक्टर उन फॉर्म एलिमेंट्स को सिलेक्ट करता है जिनकी वैल्यू उनके टाइप और कंस्ट्रेंट्स के अनुसार **मान्य (वैध)** है। यह सफल वैलिडेशन फीडबैक के लिए उपयोगी है।

उदाहरण

<!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>The style (red color background) appears if you type a relevant/ valid email address.</p>
  </body>
</html>

नोट: खाली required फील्ड भी :invalid होती है। :valid स्टाइल तभी लागू होती है जब वैल्यू मान्य हो।