當內部輸入被檢查時，我想改變環繞div的背景顏色。這是我當前的代碼:

<div
        class="flex items-center pl-4 border border-gray-200 rounded-xl"
      >
        <input
          id="bordered-checkbox-1"
          type="checkbox"
          value=""
          name="bordered-checkbox"
          class="w-5 h-5 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-0"
        />
        <label
          for="bordered-checkbox-1"
          class="w-full py-4 ml-2 text-sm"
          >Default radio</label
        >
      </div>

我試圖將peer類添加到輸入中，但是它只影響兄弟元素而不影響父元素，group類也不起作用，因為它不能識別復選框被選中的情況。

有人能幫我嗎？

您只能將同級元素作為目標。如果你想用css只定位父節點，你可以使用新的css偽選擇器:has選擇器。

大概是這樣的:

<div class="input-wrapper flex items-center rounded-xl border border-gray-200 pl-4">
  <input id="bordered-checkbox-1" type="checkbox" value="" name="bordered-checkbox" class="h-5 w-5 rounded border-gray-300 bg-gray-100 text-blue-600 focus:ring-0" />
  <label for="bordered-checkbox-1" class="ml-2 w-full py-4 text-sm">Default radio</label>
</div>

css:

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

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

注意::has支持有限，并非所有瀏覽器都支持。檢查哪個瀏覽器支持。

順風游戲