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

:checked सेलेक्टर का उद्देश्य

:checked सेलेक्टर का उपयोग चेक्ड स्टेट में चेकबॉक्स, रेडियो बटन, या सेलेक्ट ऑप्शन को स्टाइल करने के लिए किया जाता है। यह फॉर्म वैलिडेशन फीडबैक और कस्टम UI कंट्रोल्स के लिए आवश्यक है।

उदाहरण

<!DOCTYPE html>
<html>
  <head>
    <style>
      input:checked {
        height: 20px;
        width: 20px;
      }
    </style>
  </head>
  <body>
    <p>Fav sports:</p>
    <form action="">
      <input type="checkbox" value="Football">Football<br>
      <input type="checkbox" value="Cricket">Cricket<br>
      <input type="checkbox" checked="checked" value="Tennis"> Tennis<br>
      <input type="checkbox" value="Badminton">Tennis
    </form>
  </body>
</html>

इस उदाहरण में, "Tennis" चेकबॉक्स प्री-चेक्ड है, इसलिए वह बड़ा (20x20px) दिखेगा।