如何在高对比度模式下显示 CSS 按钮答案

【问题标题】：how to display CSS button in High Contast Mode如何在高对比度模式下显示 CSS 按钮
【发布时间】：2015-01-16 18:19:46
【问题描述】：

我使用下面的 CSS 来显示按钮。当我切换到 Windows 高对比度模式时，按钮变得不可见。我该如何解决这个问题？

.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;
}

我尝试提供 .button:BEFORE 但我看到正常的按钮和样式没有被应用在它上面。

请帮助我解决此问题。

谢谢

【问题讨论】：

操作系统、浏览器等？此外，您正在为您的网站开发高对比度模式，或者您的意思是类似于 Windows 的高对比度系统主题？
也许这会有所帮助 - stackoverflow.com/questions/10091676/…
我们的网站应该符合可访问性（508 合规性），并且所有按钮、图标、文本都应该在 Windows 高对比度模式下可见。希望这会有所帮助
我看到您的 CSS 的一个问题是它没有在无法识别您使用的属性的浏览器上明确设置背景颜色。如果你给按钮一个后备背景颜色，比如#E9E9E9，至少它会是不变的，不依赖于系统颜色。

标签： css

【解决方案1】：

您在课程中指定的任何背景都将无法在 WHCM 中使用有两种方式两种显示方式来修复 WHCM

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

第二个是 - CSS 内容

代码：

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

类：

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

这只是为输入和按钮修复 WHCM 的方法

【讨论】：