基于的样式同级已选中

Question

我有一个仅使用 css 创建的下拉菜单，并使用隐藏输入。现在，如果至少选择了一个选项，我想概述下拉菜单关闭时的轮廓。

此播放显示下拉菜单。我尝试使用 peer-has 但没能成功

<script src="https://cdn.tailwindcss.com/3.4.3"></script>

<main className="w-full max-w-xl mx-auto">
  <h1 className="text-3xl mt-12">Multi-Select Dropdown</h1>
  <div className="flex flex-col">
    <label class="relative"
      ><input type="checkbox" class="peer hidden" />
      <div class="inline-flex cursor-pointer rounded border px-5 py-2 after:ml-1 after:inline-flex after:items-center after:text-xs after:transition-transform after:content-['▼'] peer-checked:after:-rotate-180">Select one or more countries</div>
      <div class="pointer-events-none absolute z-10 max-h-60 w-full overflow-y-scroll border bg-red-300 opacity-0 transition-opacity peer-checked:pointer-events-auto peer-checked:opacity-100">
        <ul>
          <li>
            <label class="[&amp;:has(input:checked)]:bg-blue-200 flex cursor-pointer whitespace-nowrap px-2 py-1 transition-colors hover:bg-blue-100"><input type="checkbox" class="cursor-pointer" name="countries2" value="Spain" /><span class="ml-1">Spain</span></label>
          </li>
          <li>
            <label class="[&amp;:has(input:checked)]:bg-blue-200 flex cursor-pointer whitespace-nowrap px-2 py-1 transition-colors hover:bg-blue-100"><input type="checkbox" class="cursor-pointer" name="countries2" value="France" /><span class="ml-1">France</span></label>
          </li>
        </ul>
      </div></label
    >
  </div>
</main>

Answer 1

您可以使用

[&:has(+*_:checked)]:

任意变体，例如

[&:has(+*_:checked)]:outline

。

这会使用

:has(+*)

检查下一个同级，然后使用

:checked

检查该同级中是否有任何

* :checked

元素。

<script src="https://cdn.tailwindcss.com/3.4.3"></script>

<main class="w-full max-w-xl mx-auto">
  <h1 class="text-3xl mt-12">Multi-Select Dropdown</h1>
  <div class="flex flex-col">
    <label class="relative"
      ><input type="checkbox" class="peer hidden" />
      <div class="inline-flex cursor-pointer rounded border px-5 py-2 after:ml-1 after:inline-flex after:items-center after:text-xs after:transition-transform after:content-['▼'] peer-checked:after:-rotate-180 [&:has(+*_:checked)]:outline outline-2 outline-green-500">Select one or more countries</div>
      <div class="pointer-events-none absolute z-10 max-h-60 w-full overflow-y-scroll border bg-red-300 opacity-0 transition-opacity peer-checked:pointer-events-auto peer-checked:opacity-100">
        <ul>
          <li>
            <label class="[&:has(input:checked)]:bg-blue-200 flex cursor-pointer whitespace-nowrap px-2 py-1 transition-colors hover:bg-blue-100"><input type="checkbox" class="cursor-pointer" name="countries2" value="Spain" /><span class="ml-1">Spain</span></label>
          </li>
          <li>
            <label class="[&:has(input:checked)]:bg-blue-200 flex cursor-pointer whitespace-nowrap px-2 py-1 transition-colors hover:bg-blue-100"><input type="checkbox" class="cursor-pointer" name="countries2" value="France" /><span class="ml-1">France</span></label>
          </li>
        </ul>
      </div></label
    >
  </div>
</main>