2015-02-26 13 views
6

Czy istnieje sposób na ukształtowanie kalendarza wyświetlanego po kliknięciu strzałki w dół na danych wprowadzanych w formacie html5?CSS do stylizacji kalendarza wprowadzania danych w formacie HTML5 w przeglądarce 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/

Wiem, że są pseudo selektorów do stylizacji pole wprowadzania się do:

::-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; 
} 

Na minimum tylko trzeba go do pracy na Najnowsza wersja Google Chrome

+0

duplikatów myślę, kasy tej odpowiedzi: http://stackoverflow.com/a/16106788/2104879 – mertyildiran

+1

Nie, nie pytam o pole wejściowe, potrzebuję sposobu na ukształtowanie kalendarza. Ponadto nie potrzebuję rozwiązania Cross Browser. – meatFeed

Odpowiedz

0

Według FAQ Google, nie ma sposobu, aby zmienić styl w tym czasie: https://developers.google.com/web/updates/2012/08/Quick-FAQs-on-input-type-date-in-Google-Chrome

Jak zmienić wygląd wyboru daty?

Nie można obecnie ustawić stylu wyboru daty w stylu . W pakiecie WebKit wcześniej udostępniono sposoby kształtowania elementów sterujących formularzy za pomocą właściwości CSS o nazwie CSS w postaci pliku WWW lub pseudo-klasy :: - webkit-foo. Jednak wyskakujące okienko kalendarza nie zapewnia takich sposobów w pakiecie WebKit, ponieważ jest ono oddzielone od dokumentu, np. Menu podręcznego i nie ma obecnie standardu sterowania stylem na jego podelementach.

pozostaje ci zgodnie z renderowania Chrome lub przy użyciu niestandardowej biblioteki na polu input type="text" do zapobiegania konfliktom