Есть ли какие-либо варианты стиля для средства выбора даты HTML5?

Я действительно в восторге от средства выбора даты HTML5. Приятно знать, что W3C наконец-то устраняет некоторые недостатки, поэтому нам не нужно постоянно изобретать такую ​​общую форму ввода.

Предостережение заключается в том, что я не вижу и не предвижу многого в способах применения цветов к самому средству выбора, которое будет использовать средство выбора даты как средство прерывания сделки на большинстве сайтов. Он <select>страдает от широко распространенных взломов, заменяющих javascript, по той простой причине, что люди не могут сделать его красивым. Мне любопытно, знает ли кто-нибудь, что происходит в стране W3C?

Это в некоторой степени связано с другим более серьезным вопросом (если вы знаете ответ): стоит ли мое время пытаться принять участие в работе W3C или WHATWG, чтобы некоторые из этих вещей увидели свет? Полезны любые идеи.

Следующие восемь псевдоэлементов доступны 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
::-webkit-inner-spin-button
::-webkit-calendar-picker-indicator

Итак, если вы думали, что при вводе даты можно использовать больший интервал и смешную цветовую схему, вы можете добавить следующее:

::-webkit-datetime-edit { padding: 1em; }
::-webkit-datetime-edit-fields-wrapper { background: silver; }
::-webkit-datetime-edit-text { color: red; padding: 0 0.3em; }
::-webkit-datetime-edit-month-field { color: blue; }
::-webkit-datetime-edit-day-field { color: green; }
::-webkit-datetime-edit-year-field { color: purple; }
::-webkit-inner-spin-button { display: none; }
::-webkit-calendar-picker-indicator { background: orange; }

<input type="date">

В настоящее время не существует кроссбраузерного способа стилизации встроенного средства выбора даты без использования скриптов.

Что касается того, что происходит внутри WHATWG / W3C ... Если эта функция действительно появится, она, скорее всего, будет соответствовать стандарту CSS-UI или некоторому стандарту, связанному с Shadow DOM . На вики-странице CSS4-UI перечислено несколько связанных с внешним видом вещей, которые были исключены из CSS3-UI, но, честно говоря, модуль CSS-UI не вызывает особого интереса.

Я думаю, что ваш лучший выбор для кроссбраузерной разработки прямо сейчас - реализовать красивые элементы управления с интерфейсом на основе JavaScript, а затем отключить собственный пользовательский интерфейс HTML5 и заменить его. Я думаю, что в будущем, возможно, появятся лучшие стили нативных элементов управления, но, возможно, более вероятно будет возможность заменить нативный элемент управления на свой собственный «виджет» Shadow DOM.

Досадно, что это недоступно, а ходатайство о стандартной поддержке всегда стоит. Хотя кажется, что руководство jQuery UI попыталось, но безуспешно .

Хотя все это очень обескураживает, также стоит рассмотреть преимущества средства выбора даты HTML5, а также то, почему пользовательские стили сложны и, возможно, их следует избегать. На некоторых платформах datepicker выглядит совершенно иначе, и я лично не могу придумать какой-либо общий способ стилизации собственного datepicker.

нашел это на GitHub Zurb в

Если вы хотите сделать еще несколько нестандартных стилей. Вот весь CSS по умолчанию для рендеринга компонентов даты в webkit.

input[type="date"] {
     -webkit-align-items: center;
     display: -webkit-inline-flex;
     font-family: monospace;
     overflow: hidden;
     padding: 0;
     -webkit-padding-start: 1px;
}

input::-webkit-datetime-edit {
    -webkit-flex: 1;
    -webkit-user-modify: read-only !important;
    display: inline-block;
    min-width: 0;
    overflow: hidden;
}

input::-webkit-datetime-edit-fields-wrapper {
    -webkit-user-modify: read-only !important;
    display: inline-block;
    padding: 1px 0;
    white-space: pre;
}

Я использовал комбинацию вышеупомянутых решений и некоторых проб и ошибок, чтобы прийти к этому решению. Это заняло у меня утомительное количество времени, поэтому я надеюсь, что это может помочь кому-то другому в будущем. Я также заметил, что ввод даты выбора вообще не поддерживается Safari ...

Я использую стилизованные компоненты для визуализации прозрачного ввода для выбора даты, как показано на изображении ниже:

const StyledInput = styled.input`
  appearance: none;
  box-sizing: border-box;
  border: 1px solid black;
  background: transparent;
  font-size: 1.5rem;
  padding: 8px;
  ::-webkit-datetime-edit-text { padding: 0 2rem; }
  ::-webkit-datetime-edit-month-field { text-transform: uppercase; }
  ::-webkit-datetime-edit-day-field { text-transform: uppercase; }
  ::-webkit-datetime-edit-year-field { text-transform: uppercase; }
  ::-webkit-inner-spin-button { display: none; }
  ::-webkit-calendar-picker-indicator { background: transparent;}
`

Вы можете использовать следующий CSS для стилизации элемента ввода.

input[type="date"] {
  background-color: red;
  outline: none;
}

input[type="date"]::-webkit-clear-button {
  font-size: 18px;
  height: 30px;
  position: relative;
}

input[type="date"]::-webkit-inner-spin-button {
  height: 28px;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  font-size: 15px;
}

<input type="date" value="From" name="from" placeholder="From" required="" />

К вашему сведению, мне нужно было обновить цвет значка календаря, что казалось невозможным с такими свойствами, как color, fillи т. Д.

В конце концов я понял, что некоторые filterсвойства будут регулировать значок, поэтому, хотя я не понял, как сделать его любым цветом, к счастью, все, что мне нужно, это сделать так, чтобы значок был виден на темном фоне, поэтому я смог сделать следующее:

body { background: black; }

input[type="date"] { 
  background: transparent;
  color: white;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(100%);
}

<body>
 <input type="date" />
</body>

Надеюсь, это поможет некоторым людям, поскольку по большей части хром даже прямо говорит, что это невозможно.