无障碍功能
forced-color-adjust
用于选择启用和禁用强制颜色的实用工具。
| 类名 | 样式 |
|---|---|
forced-color-adjust-auto | forced-color-adjust: auto; |
forced-color-adjust-none | forced-color-adjust: none; |
示例
禁用强制颜色
使用 forced-color-adjust-none 实用工具可以使元素不采用强制颜色模式强制的颜色。这在强制使用有限的调色板会降低可用性的情况下很有用。
尝试在您的开发者工具中模拟 forced-colors: active 以查看更改
基础 T 恤
$35
<form> <img src="/img/shirt.jpg" /> <div> <h3>Basic Tee</h3> <h3>$35</h3> <fieldset> <legend class="sr-only">Choose a color</legend> <div class="forced-color-adjust-none ..."> <label> <input class="sr-only" type="radio" name="color-choice" value="White" /> <span class="sr-only">White</span> <span class="size-6 rounded-full border border-black/10 bg-white"></span> </label> <!-- ... --> </div> </fieldset> </div></form>您还可以使用 强制颜色变体，以便在用户启用强制颜色模式时有条件地添加样式。
恢复强制颜色
使用 forced-color-adjust-auto 实用工具可以使元素遵循强制颜色模式强制的颜色
<form> <fieldset class="forced-color-adjust-none lg:forced-color-adjust-auto ..."> <legend>Choose a color:</legend> <select class="hidden lg:block"> <option value="White">White</option> <option value="Gray">Gray</option> <option value="Black">Black</option> </select> <div class="lg:hidden"> <label> <input class="sr-only" type="radio" name="color-choice" value="White" /> <!-- ... --> </label> <!-- ... --> </div> </fieldset></form>如果您想撤消 forced-color-adjust-none 实用工具，例如在更大的屏幕尺寸上，这将非常有用。
响应式设计
前缀a forced-color-adjust 实用工具 使用像 md: 这样的断点变体，以仅在中等 屏幕尺寸及以上时应用该实用工具
<div class="forced-color-adjust-none md:forced-color-adjust-auto ..."> <!-- ... --></div>在 变体文档 中了解更多关于使用变体的信息。