2015-02-26 2 views
6

Есть ли способ создать календарь, который появляется, если вы нажмете стрелку вниз на вводе даты html5?CSS для стилизации HTML5 входной календарь даты в Chrome

<form> 
    <label for="f-duedate">Due date</label> 
     <input id="f-duedate" type="date" name="duedate" 
       data-date-format="dd.mm.YYYY"> 
</form> 

a html5 calendar

http://jsfiddle.net/no8a17eo/1/

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

::-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 { 
    display: none; 
} 
::-webkit-calendar-picker-indicator:hover { 
    background:none; 
} 

На голом минимуме мне нужно только, чтобы работать на последняя версия Google Chrome

+0

Дублированного я думаю, проверка этого ответа: http://stackoverflow.com/a/16106788/2104879 – mertyildiran

+1

Нет, я не спрашиваю о поле ввода, мне нужен способ стиля календаря. Кроме того, мне не требуется решение Cross Browser. – meatFeed

ответ

0

Согласно FAQ Google, нет никакого способа, чтобы изменить стиль в это время: https://developers.google.com/web/updates/2012/08/Quick-FAQs-on-input-type-date-in-Google-Chrome

Как изменить внешний вид выбора даты?

Вы не можете В настоящее время стиль внешнего вида выбора даты. В WebKit у нас есть ранее предоставленные способы стилизации элементов формы с помощью свойства CSS -webkit, или селектора псевдо-классов :: - webkit-foo. Однако всплывающее окно календаря не предоставляет таких способов в WebKit, поскольку оно отделено от документа, как всплывающее меню, и в настоящее время нет стандартного способа управления стилями на его подэлементах.

Вы остались с сохранением с оказанием Хрома, или используя пользовательскую библиотеку над input type="text" полем для предотвращения конфликтов

Смежные вопросы