CODEWITHSUNDEEP
htmlcssaccessibilityhigh-contrast
JJX Su
JJX Su

Reputation: 21

How to change HTML placeholder color under Windows high contrast mode?

Suppose I have the following HTML placeholder:

<input type="text" id="id" class="form-control" placeholder="enter here" />

I was able to change its color to blue using the CSS stylesheet:

.form-control::-webkit-input-placeholder {
    color: #428bca;
}

However, if I turn on high contrast mode in Windows, the placeholder color becomes grey (I think that's the default color). How can I change the placeholder color under high contrast mode?

I've made two attempts so far, but none of them ended up working.

Attempt 1 (copied from this post):

@media screen and (-ms-high-contrast: active) {
    [contentEditable=true]:empty:not(:focus):before {
        content: attr(placeholder);
        font-style: italic;
        color: #00FF00;
    }
}

Attempt 2:

@media screen and (-ms-high-contrast: active) {
    .form-control::-webkit-input-placeholder {
        color: #428bca;
    }
}

Thanks a lot for helping!

Upvotes: 1

Views: 183

Answers (0)

Related Questions