การปรับแต่งรูปลักษณ์ Date Picker
Date Picker ของ HTML5 แสดงปฏิทินแบบป๊อปอัป สามารถปรับแต่งสไตล์ได้ด้วย Pseudo-elements ของ WebKit
ตัวอย่างการจัดสไตล์
::-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; }
หมายเหตุ: Pseudo-elements นี้ทำงานเฉพาะในเบราว์เซอร์ที่ใช้เครื่องยนต์ WebKit/Blink (Chrome, Edge, Safari) ไม่รองรับใน Firefox