फॉर्म इनपुट फील्ड्स के लिए कुछ कम-ज्ञात CSS प्रॉपर्टीज

परिचय

CSS caret-color, pointer-events, और tab-size फॉर्म इनपुट फील्ड्स के लिए कुछ कम-ज्ञात प्रॉपर्टीज हैं। caret-color हमें ब्लिंकिंग कैरेट का रंग निर्दिष्ट करने की अनुमति देता है, pointer-events उपयोगकर्ताओं को किसी एलिमेंट के साथ इंटरैक्ट करने से रोकने में मदद कर सकता है, और tab-size टैब द्वारा उपयोग किए जाने वाले व्हाइट स्पेस की मात्रा सेट करता है।

उदाहरण 1: टैब साइज और पॉइंटर इवेंट्स

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      display: flex;
      flex-direction: column;
      background-color: mistyrose;
    }
    p {
      white-space: pre;
    }
    p:last-of-type {
      tab-size: 32;
      -moz-tab-size: 32;
      pointer-events: none;
    }
  </style>
</head>
<body>
  <p> Ut sed felis lobortis, fermentum magna vitae, imperdiet lectus.</p>
  <p> Ut sed felis lobortis, <a href="#">fermentum magna vitae</a>, imperdiet lectus.</p>
</body>
</html>

उदाहरण 2: कैरेट कलर के साथ फॉर्म

<!DOCTYPE html>
<html>
<head>
  <style>
    form {
      padding: 2%;
      margin: 3%;
      background-color: cadetblue;
      text-align: center;
    }
    form:focus-within {
      box-shadow: 0 0 10px rgba(0,0,0,0.6);
    }
    input {
      caret-color: navy;
      font-size: 40px;
      font-weight: large;
    }
  </style>
</head>
<body>
  <form>
    <select>
      <option>.</option>
      <option>..</option>
      <option>...</option>
    </select>
    <input type="text" value="glee" />
  </form>
</body>
</html>

अन्य उपयोगी फॉर्म-संबंधित CSS प्रॉपर्टीज

व्यावहारिक उदाहरण: मॉडर्न फॉर्म स्टाइलिंग

<!DOCTYPE html>
<html lang="hi">
<head>
  <style>
    .modern-form {
      max-width: 400px;
      margin: 2rem auto;
      padding: 2rem;
      background: white;
      border-radius: 12px;
      box-shadow: 0 4px 24px rgba(0,0,0,0.08);
    }
    .form-group { margin-bottom: 1.5rem; }
    .form-group label {
      display: block;
      margin-bottom: 0.5rem;
      font-weight: 500;
      color: #374151;
    }
    .form-group input,
    .form-group select,
    .form-group textarea {
      width: 100%;
      padding: 0.75rem 1rem;
      border: 2px solid #e5e7eb;
      border-radius: 8px;
      font-size: 1rem;
      font-family: inherit;
      transition: border-color 0.2s, box-shadow 0.2s;
      caret-color: #3b82f6; /* ब्रांडेड कैरेट */
      accent-color: #3b82f6; /* चेकबॉक्स/रेडियो के लिए */
    }
    .form-group input:focus,
    .form-group select:focus,
    .form-group textarea:focus {
      outline: none;
      border-color: #3b82f6;
      box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
    }
    .form-group input::placeholder {
      color: #9ca3af;
    }
    .form-group textarea {
      min-height: 120px;
      resize: vertical;
      field-sizing: content; /* मॉडर्न ऑटो-रिसाइज */
    }
  </style>
</head>
<body>
  <form class="modern-form">
    <h2 style="margin-bottom: 1.5rem;">संपर्क फ़ॉर्म</h2>
    <div class="form-group">
      <label for="name">नाम</label>
      <input type="text" id="name" placeholder="आपका नाम" required />
    </div>
    <div class="form-group">
      <label for="email">ईमेल</label>
      <input type="email" id="email" placeholder="you@example.com" required />
    </div>
    <div class="form-group">
      <label>प्राथमिकताएं</label>
      <label style="display:flex; align-items:center; gap:0.5rem; margin:0.5rem 0; font-weight:400;">
        <input type="checkbox" checked /> न्यूज़लेटर
      </label>
      <label style="display:flex; align-items:center; gap:0.5rem; margin:0.5rem 0; font-weight:400;">
        <input type="checkbox" /> अपडेट्स
      </label>
    </div>
    <button type="submit" style="width:100%; padding:1rem; background:#3b82f6; color:white; border:none; border-radius:8px; font-size:1rem; font-weight:600; cursor:pointer;">सबमिट करें</button>
  </form>
</body>
</html>