如何仅使用 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中文网其他相关文章！