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

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

Checkboxes

stack overflow tailwindcss Forms PlugIn: Styling Checkboxes
原文答案
author avatar

接受的答案

未选中复选框时更改(默认为白色)颜色

我可以用背景颜色来改变它,除非你的 CSS 中的其他东西影响了它。

复选标记颜色

复选标记是一个 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

复选框和 Tab 键突出显示的外边框之间的(白色)边框的颜色

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

这里一切的工作示例: https://play.tailwindcss.com/W00ktLdUFw


答案:

作者头像

这是诀窍

你需要focus-within:hidden和border-0

  <input type="checkbox" checked class="h-72 w-72 border-0 bg-transparent text-transparent focus-within:hidden" />

Working Tailwind-Play