Как удалить стиль ввода даты по умолчанию в html5

Как удалить стиль даты ввода по умолчанию в html5. В этой статье приводится подробное введение.

2. Измените стиль элемента управления датой и временем. В настоящее время в WebKit есть следующие 9 псевдоэлементов, которые могут изменить пользовательский интерфейс элемента управления датой:

 ::-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-mine-field{}input::-webkit-datetime-edit-month-field{}input ::-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 me-edit-hour-field:focus{}input::-webkit-datetime-edit-milli Second-field:focus{}input::-webkit-datetime-edit-mine-field:focus{}input::-webkit -datetime-edit-month-field:focus{}input::-webki t-datetime-edit-секундное-поле:focus{}input::-webkit-datetime-edit-week-field:focus{}input::-webkit-datetime-edit-year-field:focus{}input:: -webkit-datetime-edit-year-field[отключено]{}input::- webkit-datetime-edit-month-field[отключено]{}input::-webkit-datetime-edit-week-field[отключено]{}input::-webkit-datetime-edit-day-field[отключено]{} input::-webkit-datetime-edit-ampm-field [отключить светодиод]{}input::-webkit-datetime-edit-hour-field[отключено]{}input::-webkit-datetime-edit-milliсекундное-поле[отключено]{}input::-webkit-datetime-edit- минутное поле[отключено]{}input::-webkit-datetim e-edit-секундное-поле [отключено] {}input::-webkit-datetime-edit-text{}input::-webkit-inner-spin-button{}input::-webkit-calendar-picker-indicator{ }input::-webkit-calendar-picker-indicator:hover{}

Маленький треугольник, который меняет высоту строки и высоту типа даты, не регулируется в зависимости от размера. Это действительно некрасиво, поэтому я решил его скрыть.

Следующий CSS может удалить верхний и нижний треугольники в дате, но сохранить маленький треугольник, тип ввода которого — число.

 input[type=date]::-webkit-inner-spin-button {видимость: скрыто }

Поле ввода, типом ввода которого является дата, имеет следующие атрибуты, которые можно настроить в соответствии с вашими потребностями.

 ::-webkit-datetime-edit {padding: 1px; background: url(../selection.gif) }::-webkit-datetime-edit-fields-wrapper {background-color: #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;background-color: #eee;background-image: -webkit-linear-gradient(top, #f0f0f0, #e6e6e6);color: #666;}

Вышеупомянутый редактор представляет вам метод удаления стандартного стиля даты типа ввода в HTML5. Надеюсь, он будет вам полезен. Если у вас есть какие-либо вопросы, оставьте мне сообщение, и редактор ответит вам. вовремя. Я также хотел бы поблагодарить всех за поддержку сайта боевых искусств VeVb!