CODEWITHSUNDEEP
htmlcss
Payson
Payson

Reputation: 538

contenteditable div placeholder color in Windows high contrast mode

I have a contenteditable div for users to input text. There is a placeholder for that div, which works fine for regular mode. The color doesn't looks right in high contrast mode. I want to make sure the placeholder stands out in Windows high contrast mode. This is in regular mode.

In IE, the default high contrast placeholder color is "green" for input, or other controls. Since the placeholder is not a default attribute tag for div, the "green" color is not automatically picked up. This is in high contrast

<div id="somediv" contenteditable="true" placeholder="I am a placeholder"></div>

jsfiddle: http://jsfiddle.net/Payson/3L3r1w8m/

We care about poor vision customers too. This is important to our potential customers. Kindly please help. I couldn't find enough resources for this info.

Upvotes: 1

Views: 208

Answers (1)

Payson
Payson

Reputation: 538

I fount a way 

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

However, it supports IE only, not firefox. Chrome has it's only plugin to turn on high contrast mode. Waiting answers for firefox.

Upvotes: 1

Related Questions