WebKit-ভিত্তিক ব্রাউজারগুলোর জন্য কাস্টম স্টাইল
HTML5-র <input type="date"> এলিমেন্ট ব্রাউজারের নেটিভ ডেট পিকার দেখায়। এই পিকারের আবার-রঙ, প্যাডিং ইত্যাদি কাস্টমাইজ করার জন্য WebKit-এর প্রাইভেট pseudo-এলিমেন্টগুলো ব্যবহার করতে হয়। দ্রষ্টব্য: এই স্টাইলগুলো কেবল WebKit/Blink ইঞ্জিনवाले ব্রাউজার (Chrome, Edge, Safari, Opera) এ কাজ করে; Firefox-এ এই pseudo-এলিমেন্টগুলো সাপোর্ট করে না।
পপআপ ক্যালেন্ডারের রঙ ও প্যাডিং পরিবর্তন
::-webkit-datetime-edit { padding: 4em; }
::-webkit-datetime-edit-fields-wrapper { background: blue; }
::-webkit-datetime-edit-text { padding: 0 0.5em; }
মাস, দিন, বছর ফিল্ডের টেক্সট রঙ পরিবর্তন
::-webkit-datetime-edit-month-field { color: white; }
::-webkit-datetime-edit-day-field { color: red; }
::-webkit-datetime-edit-year-field { color: red; }
::-webkit-calendar-picker-indicator { background: gray; }
স relever: ক্রস-ব্রাউজার একই লুক পেতে হলে JavaScript-ভিত্তিক ডেট পিকার লাইব্রেরি (যেমন Flatpickr, Datepicker.js) ব্যবহার করা ভালো।
