CSS and HTML: Adding a Placeholder to Input Type Date

You can achieve this by using a CSS trick. Once you attach it to your HTML, the dates can be used as placeholders. For instance, here is an HTML code with the above-mentioned CSS code. You can refer to the codepen URL – https://codepen.io/piyushjn/pen/eqyXaM for more details. To add a font icon, you can replace the placeholder. Alex Morrison suggested two steps that can be used every day, and you can combine them. Also, you can use both steps several times in different media queries to improve its responsiveness.


Solution:

Regrettably, there is currently no universal method available for achieving this task across all browsers. However, you can resort to utilizing vendor
specific css rules
as exemplified in this jsfiddle.

::-webkit-input-placeholder {
   color: red;
}
:-moz-placeholder { /* Firefox 18- */
   color: red;  
}
::-moz-placeholder {  /* Firefox 19+ */
   color: red;  
}
:-ms-input-placeholder {  
   color: red;  
}

Frequently Asked Questions