可访问性
forced-color-adjust
用于选择强制颜色的工具。
类 | 样式 |
---|---|
forced-color-adjust-auto | forced-color-adjust: auto; |
forced-color-adjust-none | forced-color-adjust: none; |
示例(Examples)
¥Examples
选择退出强制颜色(Opting out of forced colors)
¥Opting out of forced colors
使用 forced-color-adjust-none
工具选择元素退出强制颜色模式强制执行的颜色。这在强制使用有限的调色板会降低可用性的情况下非常有用。
¥Use the forced-color-adjust-none
utility to opt an element out of the colors enforced by forced colors mode. This is useful in situations where enforcing a limited color palette will degrade usability.
尝试在你的开发者工具中模拟 `forced-colors: active` 以查看更改

Basic Tee
$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>
当用户启用强制颜色模式时,你还可以使用 强制颜色变体 有条件地添加样式。
¥You can also use the forced colors variant to conditionally add styles when the user has enabled a forced color mode.
恢复强制颜色(Restoring forced colors)
¥Restoring forced colors
使用 forced-color-adjust-auto
工具使元素遵循强制颜色模式强制的颜色:
¥Use the forced-color-adjust-auto
utility to make an element adhere to colors enforced by forced colors mode:
<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
工具,例如在更大的屏幕尺寸上,这会很有用。
¥This can be useful if you want to undo the forced-color-adjust-none
utility, for example on a larger screen size.
响应式设计(Responsive design)
¥Responsive design
在 forced-color-adjust
工具前面使用断点变体如 md:
仅在 medium 屏幕尺寸及以上时应用工具:
<div class="forced-color-adjust-none md:forced-color-adjust-auto ..."> <!-- ... --></div>
请参阅 变体文档 详细了解如何使用变体。