كيفية إزالة النمط الافتراضي لتاريخ نوع الإدخال في html5 فيما يلي مقدمة تفصيلية من خلال هذه المقالة.
2. قم بتعديل نمط التحكم في التاريخ والوقت، توجد حاليًا العناصر الزائفة التسعة التالية ضمن WebKit والتي يمكنها تغيير واجهة المستخدم الخاصة بالتحكم في التاريخ:
::-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 - هذا يتحكم في زر المسح
يتضمن ما يلي العناصر الزائفة المستخدمة حسب التاريخ والوقت والأسبوع والوقت:
input::-webkit-datetime-edit{}input::-webkit-datetime-edit-fields-wrapper{}input::-webkit-datetime-edit-ampm-field{}input::-webkit-datetime-edit -day-field{}input::-webkit-datetime-edit-hour -field{}input::-webkit-datetime-edit-milli Second-field{}input::-webkit-datetime-edit-دقيقة-field{}input::-webkit-datetime-edit-month-field{}إدخال ::-webkit-datetime-edit-الحقل الثاني{}الإدخال: :-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 لي-تحرير-ساعة-الحقل:التركيز{}الإدخال::-webkit-datetime-تحرير-مللي ثانية-الحقل:التركيز{}الإدخال::-webkit-datetime-تحرير-دقيقة-field:التركيز{}الإدخال::-webkit -datetime-edit-month-field:focus{}input::-webki t-datetime-edit-than-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[disabled]{}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-milli Second-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 التالي إزالة المثلثات العلوية والسفلية في التاريخ، مع الاحتفاظ بالمثلث الصغير الذي يكون نوع إدخاله رقمًا.
input[type=date]::-webkit-inner-spin-button {الرؤية: مخفية}يحتوي مربع الإدخال الذي يكون نوع إدخاله هو التاريخ على السمات التالية، والتي يمكن تعديلها وفقًا لاحتياجاتك الخاصة.
::-webkit-datetime-edit { الحشو: 1px الخلفية: url(../selection.gif }::-webkit-datetime-edit-fields-wrapper { لون الخلفية: #eee }::- webkit-datetime-edit-text { اللون: #4D90FE الحشو: 0.3em }::-webkit-datetime-edit-year-field {; اللون: أرجواني }::-webkit-datetime-edit-month-field { اللون: أزرق }::-webkit-datetime-edit-day-field { اللون: أخضر }::-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);color: #666;} تلخيصما ورد أعلاه هو الطريقة التي يقدمها لك المحرر لإزالة النمط الافتراضي لتاريخ نوع الإدخال في HTML5، وآمل أن يكون مفيدًا لك. إذا كانت لديك أي أسئلة، فيرجى ترك رسالة لي وسيقوم المحرر بالرد عليك في الوقت المناسب. أود أيضًا أن أشكر الجميع على دعمكم لموقع VeVb للفنون القتالية!