CSS caret-color के साथ कर्सर रंग बदलना

परिचय

सम्मिलन कैरेट (टेक्स्ट इनपुट में ब्लिंकिंग कर्सर) का रंग बदलने के लिए, CSS caret-color प्रॉपर्टी का उपयोग किया जाता है। यह फॉर्म एक्सेसिबिलिटी और दृश्य डिजाइन को बढ़ाता है।

उदाहरण 1: कस्टम कैरेट रंग

<!DOCTYPE html>
<html>
<head>
  <style>
    form {
      padding: 2%;
      margin: 2%;
      text-align: center;
    }
    form:focus-within {
      box-shadow: 0 0 10px rgba(0,0,0,0.6);
      background-color: beige;
    }
    input {
      font-size: 3em;
      caret-color: chartreuse;
      margin: 2%;
    }
  </style>
</head>
<body>
  <form>
    <input value="Check the caret color!" />
    <button>Hit!</button>
  </form>
</body>
</html>

उदाहरण 2: अदृश्य कैरेट

<!DOCTYPE html>
<html>
<head>
  <style>
    form {
      padding: 2%;
      margin: 2%;
      background-color: thistle;
    }
    form:focus-within {
      box-shadow: 0 0 10px rgba(0,0,0,0.6);
    }
    textarea {
      caret-color: transparent;
    }
  </style>
</head>
<body>
  <form>
    <input type="radio" />1
    <input type="radio" />2
    <textarea placeholder="Invisible"></textarea>
  </form>
</body>
</html>

कैरेट-कलर मान

उन्नत उपयोग: फोकस स्टेट्स के साथ कैरेट रंग

<!DOCTYPE html>
<html>
<head>
  <style>
    .form-group {
      margin: 1rem 0;
    }
    label {
      display: block;
      margin-bottom: 0.5rem;
      font-weight: bold;
    }
    input, textarea {
      width: 100%;
      max-width: 400px;
      padding: 0.75rem;
      border: 2px solid #ddd;
      border-radius: 4px;
      font-size: 1rem;
      transition: border-color 0.2s, box-shadow 0.2s;
    }
    input:focus, textarea:focus {
      outline: none;
      border-color: #0066cc;
      box-shadow: 0 0 0 3px rgba(0,102,204,0.2);
    }
    .custom-caret input {
      caret-color: #e91e63; /* ब्रांड रंग से मेल खाता है */
    }
    .error-state input {
      caret-color: #dc3545;
      border-color: #dc3545;
    }
    .success-state input {
      caret-color: #28a745;
      border-color: #28a745;
    }
  </style>
</head>
<body>
  <div class="form-group custom-caret">
    <label>कस्टम ब्रांडेड कैरेट</label>
    <input type="text" placeholder="गुलाबी कैरेट के साथ टाइप करें..." />
  </div>
  <div class="form-group error-state">
    <label>त्रुटि स्थिति कैरेट</label>
    <input type="text" placeholder="लाल कैरेट त्रुटि दर्शाता है" />
  </div>
  <div class="form-group success-state">
    <label>सफलता स्थिति कैरेट</label>
    <input type="text" placeholder="हरा कैरेट मान्य इनपुट दर्शाता है" />
  </div>
</body>
</html>

ब्राउज़र सपोर्ट

सभी मॉडर्न ब्राउज़र सपोर्ट करते हैं (Chrome 57+, Firefox 53+, Safari 11+, Edge 79+)। IE में सपोर्ट नहीं है।