অটোফিল করা হয়েছে (বা হয়নি) এমন ফিল্ড হাইলাইট করতে CSS :autofill ব্যবহার করুন, যাতে ব্যবহারকারী ফর্মটি সম্পূর্ণ করতে পারেন।
কীভাবে প্রয়োগ করতে হয়
ব্রাউজার দ্বারা অটোফিল করা (এবং ব্যবহারকারী দ্বারা এডিট করা হয়নি) ফর্ম ফিল্ড হাইলাইট করতে, :autofill ক্লাস ব্যবহার করে আপনার CSS-এ একটি সিলেক্টর যোগ করুন। এটি <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 সরাসরি ওভাররাইড করা যায় না।
সঠিক CSS ছদ্ম-ক্লাসের নাম ব্যবহার করুন
:auto-fill ব্যবহার করবেন না: এটি ভুল।
বাধ্যতামূলক: :autofill ব্যবহার করুন কারণ এটি সঠিক ছদ্ম-ক্লাসের নাম।
ফলব্যাক স্ট্র্যাটেজি
:autofill ছদ্ম-ক্লাস হল একটি প্রোগ্রেসিভ এনহ্যান্সমেন্ট। যেসব ব্রাউজারে এটি কাজ করে না, সেখানেও ফর্মটি স্বাভাবিকভাবেই কাজ করবে, তবে ইনপুটগুলি কাস্টম অটোফিল হাইলাইটিং পাবে না। ব্যবহারকারীরা এখনও ফর্মটি সম্পূর্ণ করতে পারবেন। অতিরিক্ত কোনও জাভাস্ক্রিপ্ট ফলব্যাক ব্যবহার করা যাবে না।