Chrome की ऑटोफ़िल फ़ॉन्ट परिवर्तन चुनौती पर काबू पाना

विंडोज़ पर Chrome की ऑटोफ़िल सुविधा का सामना करते समय, आपको एक कष्टप्रद फ़ॉन्ट परिवर्तन समस्या का सामना करना पड़ सकता है। सहेजे गए उपयोगकर्ता नामों पर होवर करने पर, फ़ॉन्ट आकार और शैली बदल जाती है, जिससे आपके फ़ॉर्म का संरेखण बाधित हो जाता है। जबकि आप इस समस्या को कम करने के लिए इनपुट में एक निश्चित चौड़ाई लागू कर सकते हैं, एक अधिक प्रभावी समाधान फ़ॉन्ट परिवर्तन को पूरी तरह से रोकने में निहित है।

इसे पूरा करने के लिए, आप विशेष रूप से :-वेबकिट-ऑटोफिल को लक्षित करने वाले सीएसएस नियमों का उपयोग कर सकते हैं छद्म वर्ग. यह छद्म वर्ग क्रोम के पासवर्ड मैनेजर द्वारा स्वचालित रूप से भरे गए फॉर्म के क्षेत्रों पर लागू होता है। इस नियम के अंतर्गत फ़ॉन्ट परिवार संपत्ति के लिए महत्वपूर्ण लागू करके, आप Chrome के डिफ़ॉल्ट व्यवहार को ओवरराइड कर सकते हैं और अपनी वांछित फ़ॉन्ट सेटिंग्स बनाए रख सकते हैं।

आप इसे SCSS में कैसे लागू कर सकते हैं इसका एक उदाहरण यहां दिया गया है:

input {
  &:-webkit-autofill {
    &,
    &:hover,
    &:focus {
      font-family: Times, "Times New Roman", serif !important;
    }
  }
}

वैकल्पिक रूप से, आपको केवल निम्नलिखित नियम की आवश्यकता हो सकती है:

input {
  &:-webkit-autofill::first-line {
    font-family: Times, "Times New Roman", serif !important;
  }
}