无障碍
forced-color-adjust
用于控制强制颜色模式下的样式调整工具类。
| Class | Styles |
|---|---|
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>基础款T恤</h3> <h3>$35</h3> <fieldset> <legend class="sr-only">选择颜色</legend> <div class="forced-color-adjust-none ..."> <label> <input class="sr-only" type="radio" name="color-choice" value="White" /> <span class="sr-only">白色</span> <span class="size-6 rounded-full border border-black/10 bg-white"></span> </label> <!-- ... --> </div> </fieldset> </div></form>你也可以使用强制色彩变体在用户启用强制色彩模式时有条件地添加样式。
恢复强制颜色模式
使用 forced-color-adjust-auto 工具类使元素遵循强制颜色模式（forced colors mode）强制应用的颜色：
<form> <fieldset class="forced-color-adjust-none lg:forced-color-adjust-auto ..."> <legend>选择颜色：</legend> <select class="hidden lg:block"> <option value="White">白色</option> <option value="Gray">灰色</option> <option value="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 工具类时很有用，例如在大屏幕尺寸上。
响应式设计
Prefix a forced-color-adjust utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:
<div class="forced-color-adjust-none md:forced-color-adjust-auto ..."> <!-- ... --></div>Learn more about using variants in the variants documentation.