Tailwind CSS：选中子复选框时更改父标签样式

Question

我想在选中复选框时向我的复选框容器添加边框。

目前，我有这个：

<label
  htmlFor="choose-me"
  className=
    'flex w-fit items-center justify-evely p-3 border-2 border-grey-4 text-grey-8 
     peer-checked:bg-light-indigo peer-checked:text-medium-indigo peer-checked:border-medium-indigo'>
  <input type="checkbox" id="choose-me" className="peer mr-3 " />
  Check me
</label>

我想要类似下面的东西：

但是，当我将输入放入标签中时，我无法更改标签样式。

Answer 1

纯 CSS 解决方案是使用:has伪选择器（注意：Firefox 尚不支持）。仅当标签包含已选中的复选框时，才会应用这些类。

索引.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .checkbox-label:has(input:checked) {
    @apply border-blue-800 bg-blue-400 text-blue-800;
  }
}

你的 JSX：（删除了未使用的类）

<label className="checkbox-label justify-evely border-grey-4 text-grey-8 flex w-fit items-center gap-x-2 border-2 p-3">
  <input type="checkbox" id="choose-me" />
  Check me
</label>

您可以在这里测试：https://play.tai​​lwindcss.com/zidP4zm2Pq

支持的浏览器列表:has：https://developer.mozilla.org/en-US/docs/Web/CSS/ :has#browser_compatibility