當復選框被選中時，我想將“添加邊框”添加到我的復選框容器中。

目前，我有這個:

<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>

我想要如下的東西:

但是，當我在標簽中輸入內容時，我無法更改標簽樣式。

一個只有CSS的解決方案是使用:has偽選擇器(注意:Firefox還不支持)。只有當標簽包含已被選中的復選框時，才會應用這些類。

index.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.tailwindcss.com/zidP4zm2Pq

支持的瀏覽器列表:has:https://developer . Mozilla . org/en-US/docs/Web/CSS/:has # browser _ compatibility

首先，重要的是要記住，tailwind中的對等功能并不針對父母(這正是你目前所擁有的)。您只能將相鄰的元素作為目標。

此外，由于CSS :peer combinator的工作方式，您只能針對以前的組件，這意味著當復選框被選中時，復選框必須出現在您想要影響其狀態的對等體之前。

<label
  htmlFor="choose-me"
  class=
    'flex w-fit items-center justify-evely p-3 text-grey-8 relative'
>
  <input type="checkbox" id="choose-me" class="peer mr-3 relative z-10" />
  <div class="absolute inset-0 border-2 border-grey-4 peer-checked:bg-indigo-200 peer-checked:text-indigo-800 peer-checked:border-indigo-800 peer-checked:block z-0"></div>
  <span class="relative z-10">Check me</span>
</label>

根據@Vikesir的評論，這里有一個使用純tailwind/css的示例，假設您不想在react組件中處理狀態(盡管這也是我的第一個想法，是個好主意)。

你會注意到我在一個空的div中捏造并使用它來模擬背景和邊框的變化。我還將標簽文本包裝在一個span中，以確保我可以更改它的z-index，這樣復選框和文本都可以在處理狀態更改的div上方看到。

編輯:

如果您不希望代碼中出現空的div，下面是一個版本，它使用了一個基于保存標簽文本的span構建的偽元素:

<label
  htmlFor="choose-me"
  class=
    'flex w-fit items-center justify-evely text-grey-8 relative'
>
  <input type="checkbox" id="choose-me" class="peer mr-3 absolute left-2.5 z-20" />
  <span class="relative z-10 inset-0 py-3 pr-3 pl-8 before:-z-10 before:content-[''] before:absolute before:inset-0 before:h-full before:w-full before:border-2 before:border-grey-4 peer-checked:before:bg-indigo-200 peer-checked:before:text-indigo-800 peer-checked:before:border-indigo-800 peer-checked:before:block">Check me</span>
</label>

使用useState處理活動狀態:

const [isactive,setActive] = useState(false)

在JSX:

<label
  onClick={()=>setActive(isactive?false:true)}
  className= {`${isactive?'active-style':'normal-style'} extra-style-classes`}
>
  <input type="checkbox" id="choose-me" className= {`${isactive?'active-style':'normal-style'} extra-style-classes`} />
  Check me
</label>

感謝貢獻一個堆棧溢出的答案！

請務必回答問題。提供詳細信息并分享您的研究！但是要避免…

尋求幫助、澄清或回應其他答案。根據意見發表聲明；用參考資料或個人經歷來支持他們。要了解更多，請查看我們關于撰寫精彩答案的提示。