Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> JavaScript

ตัวเลือกการจัดสไตล์สำหรับ Date Picker ของ HTML5

การปรับแต่งรูปลักษณ์ 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