tailwindcss 表单插件：样式化复选框

Question

正如标题所说，我正在使用 tailwind 和表单插件。我通过更改文本、边框和圆环颜色来设置颜色（绿色）、边框颜色（灰色）和选项卡轮廓（也为绿色）的样式。（我附上了一张图片，以便您知道我在说什么。）但是，我还没有找到如何在未选中复选框时更改（默认为白色）颜色、复选标记颜色和选项卡键突出显示的复选框和外边框之间的（白色）边框的颜色。有人可以帮忙吗？

Checkboxes

Answer 1

change the (white by default) color when the checkbox is not selected

我能够用背景颜色更改它，除非你的 css 中的其他东西正在影响它。

the checkmark color

复选标记是一个 svg，我可以通过在主 css sheet.

中添加它来覆盖颜色

[type='checkbox']:checked {
  background-image: url('data:image/svg+xml,<svg viewBox="0 0 16 16" fill="black" xmlns="http://www.w3.org/2000/svg"><path d="M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z"/></svg>');
}

这里我把fill设置成黑色。您不能使用顺风颜色或十六进制颜色进行填充。您需要转换为 RGB，例如fill="(255,0,0)" 代表红色。如果需要，您可以使用此转换器：https://www.rapidtables.com/convert/color/hex-to-rgb.html

the color of the (white) border between the checkbox and the outer border for the tab key highlighting

我可以使用 ring-offset 设置更改该颜色。例如focus:ring-offset-purple-500

此处所有内容的工作示例：https://play.tailwindcss.com/W00ktLdUFw

tailwindcss 表单插件：样式化复选框

tailwindcss Forms PlugIn: Styling Checkboxes

css

tailwind-css