Я действительно в восторге от средства выбора даты HTML5. Приятно знать, что W3C наконец-то устраняет некоторые недостатки, поэтому нам не нужно постоянно изобретать такую общую форму ввода.
Предостережение заключается в том, что я не вижу и не предвижу многого в способах применения цветов к самому средству выбора, которое будет использовать средство выбора даты как средство прерывания сделки на большинстве сайтов. Он <select>
страдает от широко распространенных взломов, заменяющих javascript, по той простой причине, что люди не могут сделать его красивым. Мне любопытно, знает ли кто-нибудь, что происходит в стране W3C?
Это в некоторой степени связано с другим более серьезным вопросом (если вы знаете ответ): стоит ли мое время пытаться принять участие в работе W3C или WHATWG, чтобы некоторые из этих вещей увидели свет? Полезны любые идеи.
источник
<select>
ввода.Ответы:
Следующие восемь псевдоэлементов доступны WebKit для настройки текстового поля ввода даты:
Итак, если вы думали, что при вводе даты можно использовать больший интервал и смешную цветовую схему, вы можете добавить следующее:
источник
::-webkit-clear-button
В настоящее время не существует кроссбраузерного способа стилизации встроенного средства выбора даты без использования скриптов.
Что касается того, что происходит внутри WHATWG / W3C ... Если эта функция действительно появится, она, скорее всего, будет соответствовать стандарту CSS-UI или некоторому стандарту, связанному с Shadow DOM . На вики-странице CSS4-UI перечислено несколько связанных с внешним видом вещей, которые были исключены из CSS3-UI, но, честно говоря, модуль CSS-UI не вызывает особого интереса.
Я думаю, что ваш лучший выбор для кроссбраузерной разработки прямо сейчас - реализовать красивые элементы управления с интерфейсом на основе JavaScript, а затем отключить собственный пользовательский интерфейс HTML5 и заменить его. Я думаю, что в будущем, возможно, появятся лучшие стили нативных элементов управления, но, возможно, более вероятно будет возможность заменить нативный элемент управления на свой собственный «виджет» Shadow DOM.
Досадно, что это недоступно, а ходатайство о стандартной поддержке всегда стоит. Хотя кажется, что руководство jQuery UI попыталось, но безуспешно .
Хотя все это очень обескураживает, также стоит рассмотреть преимущества средства выбора даты HTML5, а также то, почему пользовательские стили сложны и, возможно, их следует избегать. На некоторых платформах datepicker выглядит совершенно иначе, и я лично не могу придумать какой-либо общий способ стилизации собственного datepicker.
источник
нашел это на GitHub Zurb в
источник
Я использовал комбинацию вышеупомянутых решений и некоторых проб и ошибок, чтобы прийти к этому решению. Это заняло у меня утомительное количество времени, поэтому я надеюсь, что это может помочь кому-то другому в будущем. Я также заметил, что ввод даты выбора вообще не поддерживается Safari ...
Я использую стилизованные компоненты для визуализации прозрачного ввода для выбора даты, как показано на изображении ниже:
источник
Вы можете использовать следующий CSS для стилизации элемента ввода.
источник
К вашему сведению, мне нужно было обновить цвет значка календаря, что казалось невозможным с такими свойствами, как
color
,fill
и т. Д.В конце концов я понял, что некоторые
filter
свойства будут регулировать значок, поэтому, хотя я не понял, как сделать его любым цветом, к счастью, все, что мне нужно, это сделать так, чтобы значок был виден на темном фоне, поэтому я смог сделать следующее:Надеюсь, это поможет некоторым людям, поскольку по большей части хром даже прямо говорит, что это невозможно.
источник