CSS से रीड-ओनली <input> एलिमेंट्स को स्टाइल करें

:read-only सेलेक्टर का उपयोग

:read-only सेलेक्टर उन एलिमेंट्स को सिलेक्ट करता है जो **यूजर द्वारा एडिट नहीं किए जा सकते**। इसमें शामिल हैं:

• readonly एट्रिब्यूट वाले <input>/<textarea>
• disabled एट्रिब्यूट वाले फॉर्म कंट्रोल्स
• डिफ़ॉल्ट रूप से नॉन-एडिटेबल एलिमेंट्स (जैसे <div>, <p>)

उदाहरण

<!DOCTYPE html>
<html>
  <head>
    <style>
      input:read-only {
        background-color: blue;
        color: white;
      }
    </style>
  </head>
  <body>
    <form>
      Subject: <input type="text" name="subject" value="Maths"><br>
      Student: <input type="text" name="student" readonly value="Amit"><br>
    </form>
  </body>
</html>

"Student" इनपुट में readonly है, इसलिए यह नीला/सफेद होगा। "Subject" एडिटेबल है, इसलिए स्टाइल नहीं।