Bootstrap 4 引导开关在高对比度模式下不可见

引导4.6：在Windows高对比度模式下，开关状态不可见

在高对比度模式下观看：

<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="customSwitch1">
  <label class="custom-control-label" for="customSwitch1">Toggle this switch element</label>
</div>

这里有一个简单的例子

有人知道你做什么吗？我优先考虑的是埃奇女士。并非所有其他浏览器都真正相关

不幸的是，我必须坚持这个标准控制。使用第三方开关或其他控件不是选项。

拇指的颜色似乎由.custom开关设置的背景色控制。自定义控件输入：选中~。自定义控件标签：：after和.custom开关。自定义控件标签：：after，但在高对比度模式下，这些样式似乎没有任何效果

隐藏引导控件并使用浏览器自己的复选框输入怎么样

@媒体屏幕和-毫秒高对比度：激活{ .自定义控件输入{ 位置：绝对位置； z指数：1； 不透明度：1； 左：0.25雷姆； 顶部：0.25雷姆； } .custom switch.custom control label:：before、.custom control input:选中~。custom control label:：before、.custom switch.custom control input:选中~。custom control label:：after、.custom switch.custom control label:：after{ 不透明度：0； } } 切换此开关元件 开关在正常模式下工作正常 现在打开Windows高对比度模式[Left Alt]+[Left Shift]+[Print]->开关状态不再可见 我已经为-ms高对比度添加了媒体查询。。。没有成功 根据上的博客文章，当用户使用高对比度主题时，用户代理颜色将覆盖页面上元素的颜色。要禁用部分页面的覆盖，需要将元素设置为强制颜色调整：无；然后可以重新设置元素的样式

为了检查高对比度模式，这篇博文还说要使用@media-forced colors:active，它可以在新版Edge上使用，在Windows上也可以使用Chrome。它目前在Firefox上不工作——我不知道Safari或Mac上的Chrome，而不是@media-ms高对比度：active

为了检查明暗主题，博客帖子说使用@media-forced-colors:active和prefers-color-scheme:light和@media-forced-colors:active和prefers-color-scheme:dark

根据MDN Web文档，浏览器会触发prefers配色方案的适当值，因此即使用户使用自定义高对比度调色板，prefers配色方案也应该具有正确的值

我已经为明暗高对比度的颜色要求提供了CSS选项

@媒体屏幕和强制颜色：活动且首选颜色方案：灯光{ .custom switch.custom控件标签：：在， .custom control input:选中~.custom control label:：before， .custom switch.custom控件输入：选中~.custom控件标签：：之后， .自定义开关.自定义控件标签：：after{ 强制颜色调整：无； } .自定义控件标签：：之前{ 背景色：000； /*这会将背景填充颜色设置为“关闭”*/ 边框：000实心1px； /*这将设置交换机周围的边框*/ } .自定义开关.自定义控件标签：：after{ 背景色：fff； /*这会将拇指的颜色设置为“关闭”*/ } .自定义控件输入：选中~.自定义控件标签：：之前{ 边框颜色：000； /*这将更改上的边界*/ 背景色：fff； /*这将更改on的填充颜色*/ } .自定义开关.自定义控件输入：选中~.自定义控件标签：：后{ 背景色：000； /*这将为on设置拇指的颜色*/ } .自定义控件输入：焦点~.自定义控件标签：：之前{ 盒影：0.2rem rgba0,0,0,25； /*这将在控件具有焦点时设置高亮显示*/ } } @媒体屏幕和强制颜色：活动{ @介质不带屏幕，首选颜色方案：浅色{ .custom switch.custom控件标签：：在， .custom control input:选中~.custom control label:：before， .custom switch.custom控件输入：选中~.custom控件标签：：之后， .自定义开关.自定义控件标签：：after{ 强制颜色调整：无； } .自定义控件标签：：之前{ 背景色：fff； /*这会将背景填充颜色设置为“关闭”*/ 边框：fff实心1px； /*这将设置交换机周围的边框*/ } .自定义开关.自定义控件标签：：after{ 背景色：000； /*这会将拇指的颜色设置为“关闭”*/ } .自定义控件输入：选中~.自定义控件标签：：之前{ 边框颜色：fff； /*这将更改上的边界*/ 背景色 r:000； /*这将更改on的填充颜色*/ } .自定义开关.自定义控件输入：选中~.自定义控件标签：：后{ 背景色：fff； /*这将为on设置拇指的颜色*/ } .自定义控件输入：焦点~.自定义控件标签：：之前{ 框阴影：0.2rem rgba255、255、255、.50； /*这将在控件具有焦点时设置高亮显示*/ } } } 切换此开关元件 开关在正常模式下工作正常 现在打开Windows高对比度模式[Left Alt]+[Left Shift]+[Print]->开关状态不再可见 我已经为-ms高对比度添加了媒体查询。。。没有成功

---

谢谢你的帮助，里奇。所以，你注意到了和我一样的问题。我相信这一定是一个bug，我把它作为一个问题传递给了相应的GitHub组。是的，简单的复选框是我的B计划。但也许其他人有一个很好的解决方案。再次感谢！天哪，莫利。你为这件事所做的一切，我感激不尽。你真的找到了一个有效的解决办法。我自己永远也不会明白这一点。顺便说一句：Bootstrap团队的某个人回答说，这确实是他们必须解决的问题。因此，希望他们能拿出一个开箱即用的解决方案。再次感谢你，里奇！！真棒的帮助。