forced-color-adjust
Các tiện ích để chọn tham gia hoặc không tham gia forced colors.
| Class | Styles |
|---|---|
forced-color-adjust-auto | forced-color-adjust: auto; |
forced-color-adjust-none | forced-color-adjust: none; |
Ví dụ
Không tham gia forced colors
Sử dụng tiện ích forced-color-adjust-none để chọn không tham gia các màu được thực thi bởi chế độ forced colors. Điều này hữu ích trong các tình huống mà việc thực thi bảng màu hạn chế sẽ làm giảm khả năng sử dụng.
Try emulating `forced-colors: active` in your developer tools to see the changes
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>Bạn cũng có thể sử dụng forced colors variant để thêm kiểu có điều kiện khi người dùng đã bật chế độ forced colors.
Khôi phục forced colors
Sử dụng tiện ích forced-color-adjust-auto để làm cho một phần tử tuân thủ các màu được thực thi bởi chế độ forced colors:
<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>Điều này có thể hữu ích nếu bạn muốn hoàn tác tiện ích forced-color-adjust-none, ví dụ như trên kích thước màn hình lớn hơn.
Responsive design
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.