如何僅使用 CSS 根據複選框狀態設定標籤樣式？

在沒有 JavaScript 的情況下根據複選框狀態設定標籤樣式

Web 開發中的許多場景都涉及根據使用者輸入顯示資訊。一個常見的範例是在選取或取消選取相應的核取方塊時切換標籤的外觀。雖然 JavaScript 提供了一種簡單的方法來實現此目的，但本文探討了純 CSS 解決方案。

相鄰同級組合器

此技術的關鍵在於相鄰同級組合器 ( )。此選擇器可讓您定位邏輯 DOM 樹中與另一個元素相鄰且位於其前面的元素。在我們的例子中，我們希望定位緊接在複選框之後的標籤元素。

考慮以下HTML 結構：

<div>
  <input type="checkbox" class="check-with-label">

設定標籤樣式

現在，使用相鄰同級組合器，我們可以編寫僅當其前面的複選框為時才針對標籤元素的CSS規則check:

.check-with-label:checked + .label-for-check {
  font-weight: bold;
}

此規則規定，任何具有“check-with-label”類且處於選中狀態的元素都將使其相鄰的同級元素具有“label-for-check”類樣式使用粗體字體粗細。

範例：

將這些 CSS 規則應用於給定的 HTML範例將會產生像這樣：

<div>
  <input type="checkbox" class="check-with-label">

.check-with-label:checked + .label-for-check {
  font-weight: bold;
}

輸出：

My Label (bold)

在這種情況下，「我的標籤」將會以粗體顯示，因為前面的複選框被選中，表明這種純CSS 技術成功地根據複選框狀態更改了標籤的外觀。

以上是如何僅使用 CSS 根據複選框狀態設定標籤樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！