Change Chrome input type date placeholder color?

Starr Duskk
Starr Duskk used Ask the Experts™
on
I am using the standard input type date textbox on Chrome.

        <asp:TextBox ID="txtHireDate" CssClass="stylDOBTextbox" runat="server"></asp:TextBox>

Open in new window


I am setting the attribute type to date in the code behind.
txtHireDate.Attributes("type") = "date"

Open in new window


Right now the place holder text is "mm/dd/yyyy" and the color for the placeholder text is the same as the input text.
I need the placeholder text to be a different color than when the user selects a date.

I have tried these css solutions below and none of them have worked:
input[type="text"]:disabled, input[type="date"]:disabled {
  color: #9A9A9A;
}

input[type="date"]:invalid::-webkit-datetime-edit {
    color: #9A9A9A !important;
}
::-webkit-datetime-edit-day-field:not([aria-valuetext=blank]),
::-webkit-datetime-edit-month-field:not([aria-valuetext]),
::-webkit-datetime-edit-year-field:not([aria-valuetext]) 
{
 color: #9A9A9A !important;
}
input::-webkit-datetime-edit-fields-wrapper > [aria-valuetext=blank], input::-webkit-datetime-edit-fields-wrapper > [aria-valuetext] {
      color: #9A9A9A !important;
}
::placeholder {
    color: #9A9A9A !important;
}

Open in new window

I also tried using javascript to change the color.
 var el = document.getElementsByTagName("input");
    el.onchange = function () {
        if (el.value === '') {
            el.classList.add("testPlaceholder");
        } else {
            el.classList.remove("testPlaceholder");
        }
    }

Open in new window

None of the solutions I found online seem to work. It appears to be a common issue with the Chrome textbox, but I can't seem to find a solution that works.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Hi,

I would suggest to use a date plugins like Bootstrap date picker to have control on the form field CSS otherwise it will take the browser default color.

I'm using this one  because it is easy to use and flexible https://github.com/uxsolutions/bootstrap-datepicker

When you rigth click /  inspect the field in Chrome
check the style tab If the field color is not attached to a CSS class it's mean it is the browser default color
Starr DuskkASP.NET VB.NET Developer

Author

Commented:
Thank you for your suggestion, but the client wants to use default browser textbox type date. I can bring the information you gave me to their attention, but they have rejected similar date plugins in the past.
There are compatibility issues with browser regarding date
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date#Browser_compatibility

This is what they mention on the page
At the moment, the best way to deal with dates in forms in a cross-browser way is to have the user enter the day, month, and year in separate controls, or to use a JavaScript library
Build an E-Commerce Site with Angular 5

Learn how to build an E-Commerce site with Angular 5, a JavaScript framework used by developers to build web, desktop, and mobile applications.

ASP.NET VB.NET Developer
Commented:
Thank you for the information, but I was able to alter one of the functions I found online to work like I needed. It works for Chrome and changes it perfectly.
 
$(document).ready(function () {
        var el = document.getElementById("<%= txtHireDate.ClientID  %>");
        alert(el.value);
        el.onchange = function () {
            alert(el.value);
            if (el.value === '' || el.value === 'mm/dd/yyyy' || el.value === 'yyyy/mm/dd') {
                el.classList.add("testPlaceholder");
            } else {
                el.classList.remove("testPlaceholder");
            }
        }
    });

Open in new window

Starr DuskkASP.NET VB.NET Developer

Author

Commented:
Thank you for the help regarding this! I really appreciate it.
I'm glad you fix it :)

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial