วิธีลบรูปแบบเริ่มต้นของวันที่ประเภทอินพุตใน html5 ต่อไปนี้เป็นคำแนะนำโดยละเอียดผ่านบทความนี้
2. ปรับเปลี่ยนรูปแบบของการควบคุมวันที่และเวลา ปัจจุบันมีองค์ประกอบหลอก 9 รายการต่อไปนี้ภายใต้ WebKit ที่สามารถเปลี่ยน UI ของการควบคุมวันที่:
::-webkit-datetime-edit - ควบคุมพื้นที่การแก้ไข ::-webkit-datetime-edit-fields-wrapper - ควบคุมพื้นที่ปี เดือน และวัน ::-webkit-datetime-edit-text - ควบคุมปี เดือน และวัน เครื่องหมายทับหรือขีดกลางระหว่าง ::-webkit-datetime-edit-month-field – ควบคุมเดือน::-webkit-datetime-edit-day-field – ควบคุมวันที่ระบุ::-webkit-datetime-edit-year-field - ควบคุมข้อความปี เช่น พื้นที่ที่มีตัวอักษรสี่ตัวของปี 2017::-webkit-inner-spin-button - นี่คือการควบคุมของ ลูกศรขึ้นและลงขนาดเล็ก:: -webkit-calendar-picker-indicator – สิ่งนี้ควบคุมลูกศรแบบเลื่อนลง::-webkit-clear-button – สิ่งนี้ควบคุมปุ่มล้าง
ต่อไปนี้รวมถึงองค์ประกอบหลอกที่ใช้ตามวันที่ วันที่เวลา สัปดาห์ และเวลา:
อินพุต::-webkit-datetime-edit{}อินพุต::-webkit-datetime-edit-fields-wrapper{}อินพุต::-webkit-datetime-edit-ampm-field{}อินพุต::-webkit-datetime-edit -day-field{}input::-webkit-datetime-edit-hour -field{}input::-webkit-datetime-edit-millisecond-field{}input::-webkit-datetime-edit-minute-field{}input::-webkit-datetime-edit-month-field{}input ::-webkit-datetime-edit-second-field{}อินพุต: :-webkit-datetime-edit-week-field{}input::-webkit-datetime-edit-year-field{}input::-webkit-datetime-edit-ampm-field:focus{}input::-webkit -datetime-edit-day-field:focus{}input::-webkit-dateti me-แก้ไขชั่วโมงฟิลด์:โฟกัส{}อินพุต::-webkit-datetime-แก้ไข-มิลลิวินาทีฟิลด์:โฟกัส{}อินพุต::-webkit-datetime-แก้ไขนาทีฟิลด์:โฟกัส{}อินพุต::-webkit -datetime-edit-month-field:focus{}input::-webki t-datetime-edit-second-field:focus{}input::-webkit-datetime-edit-week-field:focus{}input::-webkit-datetime-edit-year-field:focus{}input:: -webkit-datetime-edit-year-field[ปิดการใช้งาน]{}อินพุต::- webkit-datetime-edit-month-field[ปิดการใช้งาน]{}input::-webkit-datetime-edit-week-field[disabled]{}input::-webkit-datetime-edit-day-field[disabled]{} อินพุต :: -webkit-datetime-edit-ampm-field [disab led]{}input::-webkit-datetime-edit-hour-field[disabled]{}input::-webkit-datetime-edit-millisecond-field[disabled]{}input::-webkit-datetime-edit- นาทีฟิลด์ [ปิดการใช้งาน] {}อินพุต::-webkit-datetim e-edit-second-field[disabled]{}input::-webkit-datetime-edit-text{}input::-webkit-inner-spin-button{}input::-webkit-calendar-picker-indicator{ }อินพุต::-webkit-calendar-picker-indicator:hover{}สามเหลี่ยมเล็กๆ ที่เปลี่ยนความสูงและความสูงของแถวของประเภทวันที่จะไม่ปรับตามขนาด มันน่าเกลียดมาก ฉันจึงตัดสินใจซ่อนมันไว้
CSS ต่อไปนี้สามารถลบสามเหลี่ยมด้านบนและด้านล่างในวันที่ แต่ยังคงรูปสามเหลี่ยมขนาดเล็กที่มีประเภทอินพุตเป็นตัวเลข
อินพุต [ประเภท = วันที่] :: - webkit-inner-spin-button { การมองเห็น: ซ่อนไว้ }กล่องอินพุตที่มีประเภทอินพุตเป็นวันที่มีคุณสมบัติดังต่อไปนี้ ซึ่งสามารถปรับเปลี่ยนได้ตามความต้องการของคุณเอง
::-webkit-datetime-edit { การขยาย: 1px; พื้นหลัง: url(../selection.gif); }::-webkit-datetime-edit-fields-wrapper { สีพื้นหลัง: #eee; webkit-datetime-edit-text { color: #4D90FE; padding: 0 .3em; สี: สีม่วง; }::-webkit-datetime-edit-month-field { color: blue; }::-webkit-datetime-edit-day-field { color: green }::-webkit-inner-spin- ปุ่ม { การมองเห็น: ซ่อนไว้; }::-webkit-calendar-picker-indicator {border: 1px solid #ccc;border-radius: 2px; box-shadow: inset 0 1px #fff, 0 1px #eee;สีพื้นหลัง: #eee;พื้นหลังภาพ: -webkit-linear-gradient(top, #f0f0f0, #e6e6e6);สี: #666;} สรุปข้างต้นเป็นวิธีที่ตัวแก้ไขแนะนำให้คุณลบรูปแบบเริ่มต้นของวันที่ประเภทอินพุตใน HTML5 ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันแล้วตัวแก้ไขจะตอบกลับคุณ ทันเวลา ฉันอยากจะขอบคุณทุกคนที่ให้การสนับสนุนเว็บไซต์ศิลปะการต่อสู้ VeVb!