强调色

示例

设置强调色

使用 accent-rose-500 和 accent-lime-600 等工具类可以更改元素的强调色：

<label>  <input type="checkbox" checked />  浏览器默认</label><label>  <input class="accent-pink-500" type="checkbox" checked />  自定义样式</label>

这有助于通过覆盖浏览器默认颜色来美化复选框和单选按钮组等元素。

调整透明度

使用颜色透明度修饰符可以控制元素强调色的透明度：

<input class="accent-purple-500/25" type="checkbox" checked /><input class="accent-purple-500/75" type="checkbox" checked />

目前强调色透明度设置仅在Firefox浏览器中支持。

使用自定义值

Use the accent-[<value>] syntax to set the 强调色 based on a completely custom value:

<input class="accent-[#50d71e] ..." type="checkbox" />

For CSS variables, you can also use the accent-(<custom-property>) syntax:

<input class="accent-(--my-accent-color) ..." type="checkbox" />

This is just a shorthand for accent-[var(<custom-property>)] that adds the var() function for you automatically.

在悬停时应用

Prefix an accent-color utility with a variant like hover:* to only apply the utility in that state:

<input class="accent-black hover:accent-pink-500" type="checkbox" />

Learn more about using variants in the variants documentation.

响应式设计

Prefix an accent-color utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:

<input class="accent-black md:accent-pink-500 ..." type="checkbox" />

Learn more about using variants in the variants documentation.

定制主题

Use the --color-* theme variables to customize the color utilities in your project:

@theme {  --color-regal-blue: #243c5a; }

Now the accent-regal-blue utility can be used in your markup:

<input class="accent-regal-blue" type="checkbox" />

Learn more about customizing your theme in the theme documentation.