Are there any style options for the HTML5 Date picker?

by

The following eight pseudo-elements are made available by WebKit for customizing a date input’s textbox:

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

So if you thought the date input could use more spacing and a ridiculous color scheme you could add the following:

::-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">

Screenshot

More Related Contents:

  1. CSS Button styling – Need some help -html css RADIO BUTTON LINK
  2. Is there any way to change input type=”date” format?
  3. How can I set max-length in an HTML5 “input type=number” element?
  4. Do checkbox inputs only post data if they’re checked?
  5. Put icon inside input element in a form
  6. Implement an input with a mask
  7. Disable certain dates from html5 datepicker
  8. How to customize ?
  9. Style input type file? [duplicate]
  10. Change default text in input type=”file”?
  11. Override browser form-filling and input highlighting with HTML/CSS
  12. How to make HTML input tag only accept numerical values?
  13. Changing the symbols shown in a HTML password field
  14. How to set date format in HTML date input tag?
  15. Disable native datepicker in Google Chrome
  16. Is well formed without a ?
  17. Wrapping text inside input type=”text” element HTML/CSS
  18. Why does my “oninvalid” attribute let the pattern fail?
  19. Tab Index on div
  20. Why cannot change checkbox color whatever I do? [duplicate]
  21. Bug With Firefox – Disabled Attribute of Input Not Resetting When Refreshing
  22. is there a max size to the length of a hidden input in html?
  23. What does “for” attribute do in an HTML tag?
  24. How to change the text color of first select option
  25. How do I trigger an HTML button when the “Enter” key is pressed in a textbox?
  26. What’s the point of having hidden input in HTML? What are common uses for this?
  27. Why isn’t textarea an input[type=”textarea”]?
  28. What is the best way to replace the file browse button in html?
  29. How to get the text from the HTML5 input field error message in Selenium?
  30. Make input element (type=”text”) handle multiple lines of text

Leave a Comment