التغلب على تحدي تغيير خط الملء التلقائي في Chrome

عند مواجهة ميزة الملء التلقائي في Chrome على نظام التشغيل Windows، قد تواجه مشكلة مزعجة في تغيير الخط. عند المرور فوق أسماء المستخدمين المحفوظة، يتغير حجم الخط ونمطه، مما يؤدي إلى تعطيل محاذاة النموذج الخاص بك. على الرغم من أنه يمكنك تطبيق عرض ثابت على الإدخال للتخفيف من هذه المشكلة، إلا أن الحل الأكثر فعالية يكمن في منع تغيير الخط تمامًا.

لتحقيق ذلك، يمكنك استخدام قواعد CSS التي تستهدف على وجه التحديد :-webkit-autofill الطبقة الزائفة. تنطبق هذه الفئة الزائفة على مناطق النموذج التي يتم ملؤها تلقائيًا بواسطة مدير كلمات مرور 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;
  }
}

يستهدف العنصر الزائف ::السطر الأول السطر الأول من الإدخال، وهو المكان الذي يحدث فيه الملء التلقائي عادةً.

من خلال دمج قواعد CSS هذه، يمكنك منع الملء التلقائي في Chrome بشكل فعال تغيير الخط، والحفاظ على المحاذاة والجمالية لنموذج تسجيل الدخول الخاص بك.