css - tailwindcss 表单插件 : Styling Checkboxes

Question

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

Checkboxes

Answer 1

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

我可以用背景颜色来改变它，除非你的 css 中的其他东西正在影响它。

the checkmark color

复选标记是一个 svg，我可以通过将它添加到主 css 表中来覆盖颜色。

[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