جدال با پس زمینه‌ی زرد ، یا چطور رنگ پس‌زمینهٔ زرد کروم برای ورودی‌های autocomplete را از بین ببریم

مدت زیادی می‌گذره از زمانی‌که گوگل کروم این قابلیت رو اضافه کرد. منظورم هایلایت کردن ورودی‌هایی هست که کاربر از قابلیت autocomplete مرورگر استفاده می‌کنه.

به احتمال زیاد تا حالا این حالت رو دیدین:

من معمولاً حذف این جور چیزها رو پیشنهاد نمی‌کنم، چون کاربران اون مرورگر به اون ویژگی عادت می‌کنند و وقتی شما تغییرش می‌دین ممکنه دچار سردرگمی بشن در اون قسمت. عمداً هم از فرم ورود گوگل تصویر گذاشتم تا ببینید خود گوگل هم به این حالت پایبند هست. (البته شاید طراح مخالف بوده باشه :D).

اما خب خیلی وقتا پیش میاد که طرح به هیچ وجه اون رنگ زرد رو پذیرا نیست. یه جستجوی ساده تو گوگل نشون می‌ده که خیلیا خواستن این رنگ زرد تو طرحشون وجود نداشته باشه.

راه حل

خوشبختانه کروم برای ورودی‌هایی که به صورت خودکار پر می‌شن شبه‌انتخابگر (pseudo-selector) -webkit-autofill رو در اختیارمون قرار داده که میشه ازش برای استایل دادن به اون ورودی‌ها استفاده کرد.

و متأسفانه اون رنگ زرد رو به راحتیِ تغییر پس‌زمینه با استایل نمی‌ تونید تغییر بدید. :D

به دو روش می‌شه از اون پس زمینه‌ٔ زرد خلاص شد:

یه راه اینه که بهش یه سایه داخلی خیلی بزرگ بدین که روی اون پس‌زمینه بیفته:

input:-webkit-autofill{
  -webkit-box-shadow: inset 0 0 0 1000px #fff;
}

تو این حالت اگر بخواین پس‌زمینه ورودی شفاف باشه، دستتون بسته هست و از این راه نمی‌شه کاریش کرد.

پس برای داشتن پس‌زمینهٔ شفاف می‌ریم سراغ راه دوم:

input:-webkit-autofill{
  transition: background-color 0s cubic-bezier(1, 0, 1, 0) 1000s;
}

تو این روش به خاطر اینکه اون ورودی بعد از پرشدن، پس‌زمینه رو می‌گیره، ما یه transition برای این تغییر پس‌زمینه نوشتیم و تأخیر شروع انیمیشن رو یه عدد بزرگ گذاشتیم، در نتیجه به احتمال بالا تا زمانی که کاربر با اون فرم کار داره اون پس زمینهٔ زرد دیده نخواهد شد.

نکته‌ای که باید تو این روش بهش توجه داشته باشید اینه که اگر transition های دیگری هم برای اون ورودی تعریف کرده بودید، باید دوباره تعریف کنید مثلا:

input.border-animate:-webkit-autofill{
  transition: background-color 0s cubic-bezier(1, 0, 1, 0) 1000s, color 0.5s;
}

اگه روش‌های دیگه‌ای هم سراغ دارین، خوشحال می‌شم بگین تا یاد بگیریم :)