Change Chrome input type date placeholder color?

I am using the standard input type date textbox on Chrome.

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

Select allOpen in new window

I am setting the attribute type to date in the code behind.

txtHireDate.Attributes("type") = "date"

Select allOpen 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;
}

Select allOpen 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");
        }
    }

Select allOpen 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.