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

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

:focus सेलेक्टर का उपयोग उस एलिमेंट को स्टाइल करने के लिए किया जाता है जिस पर वर्तमान में फोकस है। यह मुख्य रूप से फॉर्म एलिमेंट्स (जैसे <input>, <textarea>, <select>) और लिंक्स (<a>) पर लागू होता है जब वे कीबोर्ड नेविगेशन या माउस क्लिक के माध्यम से फोकस प्राप्त करते हैं।

उदाहरण

नीचे दिए गए कोड में, जब कोई इनपुट फील्ड फोकस में आता है, तो उसका बैकग्राउंड रंग हरा हो जाता है।

<!DOCTYPE html>
<html>
  <head>
    <style>
      input:focus {
        background-color: green;
      }
    </style>
  </head>
  <body>
    <form action="">
      Subject <input type="text" name="subject"><br>
      Student: <input type="text" name="student"><br>
      Age: <input type="number" name="age"><br>
      <input type="submit" value="Submit">
    </form>
  </body>
</html>

महत्वपूर्ण: एक्सेसिबिलिटी के लिए :focus स्टाइल्स को हमेशा विज़िबल रखें, ताकि कीबोर्ड यूजर्स को पता चल सके कि कौन सा एलिमेंट फोकस में है।