1

I am using below CSS to display button. When i switch to Windows High Contrast Mode, buttons become invisible. how do i fix this issue?

.button
{
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    background: -moz-linear-gradient(bottom,  #d3d3d3,  #fff);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#d3d3d3');
    color: #005694;
    font-weight: bold;
    border: 1px solid #808080;
    margin-top: 1.5em;
}

I tried giving .button:BEFORE but with that i see normal button and sytles are not getting applied on it.

Please help me with some tips to fix this issue.

thanks

Chintan
  • 906
  • 4
  • 14
  • 30
  • OS, Browser, etc? Also, you're developing a high contrast mode to your site, or you mean something like Windows' High Contrast system themes? – This company is turning evil. Mar 03 '14 at 14:32
  • Perhaps this will help - http://stackoverflow.com/questions/10091676/what-actually-happens-to-css-in-high-contrast-mode – Pattle Mar 03 '14 at 14:33
  • our site should be compliant with Accessibility (508 compliance) and as per that all buttons, icons, text should be visible in windows high contrast mode. Hope this helps – Chintan Mar 03 '14 at 14:39
  • One problem I see with your CSS is that it doesn't set a background color explicitly on browsers that don't recognise the properties you use. If you give the button a fallback background color like `#E9E9E9`, at least it will be constant and not depend on the system colors. – Mr Lister Mar 03 '14 at 20:34

1 Answers1

0

Any Background you specify in the class will not work in WHCM There are two way two way to display to fix WHCM

<input type="image" src="images/arrow.png" />

And second is - CSS Content

Code:

<button type="button">
<span class="whmcbtn"></span>
</button>

Class:

.whmcbtn:before { content: url(images/arrow.png);}

This only the way to fix WHCM for inputs and buttons

Anand Vaishnav
  • 7
  • 6