-2

Can you style the input boxes that will appear when using input with type of date or color, and if so, how?

<input type="color">
<input type="date">

@edit

Since some of you are getting confused and maybe rightfully so, I don't mean to edit the initially visible input button, but rather the dialogue window that pops out in the browser when you click the input.

Rob
  • 14,746
  • 28
  • 47
  • 65
aMJay
  • 2,215
  • 6
  • 22
  • 34
  • 1
    Possible duplicate of [Are there any style options for the HTML5 Date picker?](https://stackoverflow.com/questions/14946091/are-there-any-style-options-for-the-html5-date-picker) – nikitahl Nov 21 '18 at 11:14
  • 4
    Possible duplicate of [Is there any way to customize the color picker in HTML 5?](https://stackoverflow.com/questions/8033376/is-there-any-way-to-customize-the-color-picker-in-html-5) – ksav Nov 21 '18 at 11:27
  • @ksav the post you linked indeed partially answers my question, however it was posted 7 years ago and even if the answer didn't change I'd rather not base my opinion on such an old answer. – aMJay Nov 21 '18 at 11:30

1 Answers1

2

The popup windows box are system objects, and not subject to CSS. To style them you need to mimic the functionality in a custom popup.

You can do endless customization for the input button using CSS.

input[type='date']{
padding:5px;
border: 1px solid green;
color: red;
background-color: yellow;
}

input[type='color']{
padding:5px;
border: 1px solid green;
color: red;
background-color: yellow;
}
<input type="color">
<input type="date">
onejeet
  • 1,191
  • 6
  • 14
  • What I ment to apply the css to are the windows that will pop up when clicking those specific inputs, not the inputs themselves – aMJay Nov 21 '18 at 11:12
  • 4
    The popup windows box are system objects, and not subject to CSS. To style them you need to mimic the functionality in a custom popup. – onejeet Nov 21 '18 at 11:15