CSS से निर्दिष्ट रेंज में वैल्यू वाले <input> एलिमेंट्स को स्टाइल करें

:in-range सेलेक्टर का उपयोग

:in-range सेलेक्टर का उपयोग उन <input> एलिमेंट्स को स्टाइल करने के लिए किया जाता है जिनकी वैल्यू निर्दिष्ट min और max एट्रिब्यूट्स के भीतर होती है। यह केवल type="number", range, date आदि जैसे वैल्यू-बेस्ड इनपुट्स पर काम करता है।

उदाहरण

<!DOCTYPE html>
<html>
  <head>
    <style>
      input:in-range {
        border: 3px dashed orange;
        background: yellow;
      }
    </style>
  </head>
  <body>
    <input type="number" min="5" max="10" value="9">
    <p>The style only works for the value entered i.e. 9</p>
  </body>
</html>

नोट: यदि वैल्यू रेंज से बाहर है, तो :out-of-range सेलेक्टर लागू होता है।