सीएसएस :autofill का इस्तेमाल करके, उन फ़ील्ड को हाइलाइट करें जिनमें जानकारी अपने-आप भरी गई है या नहीं भरी गई है. इससे उपयोगकर्ता को फ़ॉर्म भरने में मदद मिलती है.
इन्हें कैसे लागू करें
ब्राउज़र से ऑटोमैटिक तरीके से भरे गए फ़ॉर्म फ़ील्ड को हाइलाइट करने के लिए, :autofill क्लास का इस्तेमाल करके अपनी सीएसएस में एक सिलेक्टर जोड़ें. हालांकि, अगर उपयोगकर्ता ने फ़ॉर्म फ़ील्ड में बदलाव किया है, तो उसे हाइलाइट नहीं किया जा सकता. इसका इस्तेमाल <input>, <select> या <textarea> एलिमेंट के लिए किया जा सकता है.
ऑटोमैटिक तरीके से भरी जाने वाली स्थितियों को स्टाइल करते समय, आपको सुलभता के सबसे सही तरीकों का पालन करना होगा:
- कई तरह के इंडिकेटर: ऑटोमैटिक तरीके से भरे गए फ़ील्ड को दिखाने के लिए, सिर्फ़ बॉर्डर के रंग पर भरोसा न करें. बॉर्डर की मोटाई और कस्टम बैकग्राउंड शेडिंग जैसे कई इंडिकेटर का इस्तेमाल करें, ताकि स्टेटस को आसानी से समझा जा सके.
- फ़ोकस इंडिकेटर बनाए रखें: कीबोर्ड का इस्तेमाल करने वाले लोगों के लिए, साफ़ और ज़्यादा कंट्रास्ट वाला विकल्प उपलब्ध कराए बिना, फ़ोकस आउटलाइन (
outline: none) को कभी न हटाएं.
इस उदाहरण में, कस्टम बॉर्डर और बैकग्राउंड सेट करने के लिए :autofill का इस्तेमाल किया गया है. साथ ही, फ़ोकस स्टाइल को साफ़ तौर पर दिखाया गया है:
input:autofill,
input:-webkit-autofill {
/* Multiple indicators: use both a distinct border and background color via box-shadow to avoid color-only state */
border: 2px solid #2e7d32;
box-shadow: 0 0 0 100vmax #e8f5e9 inset;
}
/* MANDATORY: Always provide an explicit focus indicator when styling autofilled states */
input:autofill:focus-visible,
input:-webkit-autofill:focus-visible {
outline: 3px solid #000;
outline-offset: 2px;
}
इस उदाहरण में दिखाया गया है कि बैकग्राउंड को पसंद के मुताबिक बनाने के लिए, box-shadow प्रॉपर्टी का इस्तेमाल किया गया है. ऐसा इसलिए, क्योंकि ऑटोमैटिक तरीके से भरे गए फ़ील्ड में, background-color को सीधे तौर पर बदला नहीं जा सकता.
सही सीएसएस स्यूडो-क्लास नेम का इस्तेमाल करें
:auto-fill का इस्तेमाल न करें: यह गलत है.
ज़रूरी: :autofill का इस्तेमाल करें, क्योंकि यह सूडो-क्लास का सही नाम है.
फ़ॉलबैक रणनीतियां
:autofill स्यूडो-क्लास, परतदार वृद्धि है. जिन ब्राउज़र में यह सुविधा काम नहीं करती उनमें फ़ॉर्म सामान्य तरीके से काम करेगा. हालांकि, इनपुट में कस्टम तरीके से जानकारी ऑटोमैटिक भरने की सुविधा हाइलाइट नहीं होगी. उपयोगकर्ता अब भी फ़ॉर्म को पूरा भर पाएंगे. किसी अन्य JavaScript फ़ॉलबैक का इस्तेमाल नहीं किया जाना चाहिए.