CSS 伪类：indeterminate 实用指南

CSS 伪类:indeterminate是一个方便的工具，可以为用户界面交互添加一层复杂性。主要是，当用户的选择部分完成时，它有助于指示 UI 元素中的中间状态，例如复选框。因此，让我们看一个简单的示例，展示此功能的潜在应用。

设置 HTML 结构

<div class="container">
  <ul>
    <li>
      <input type="checkbox" id="category">
      <label for="category">
        Groceries
      </label>
      <ul>
        <li>
          <label>
            <input type="checkbox" class="subCategory">
            Fruits
          </label>
        </li>
        <li>
          <label>
            <input type="checkbox" class="subCategory">
            Vegetables
          </label>
        </li>
        <li>
          <label>
            <input type="checkbox" class="subCategory">
            Dairy
          </label>
        </li>
      </ul>
    </li>
  </ul>
</div>

在这种情况下，我们构建了一个列表，其中包含一个标记为“Groceries”的主复选框和三个子类别。

使用 CSS 增强视觉反馈

接下来，我们重点关注使用 CSS 来直观地区分复选框的各种状态。

body {
color: #555;
font-size: 1.25em;
font-family: system-ui;
}
 
ul {
list-style: none;
}
 
.container {
margin: 40px auto;
max-width: 700px;
}
 
li {
margin-top: 1em;
}
 
label {
font-weight: bold;
}
 
input[type="checkbox"]:indeterminate + label {
color: #f39c12;
}

选择器input[type="checkbox"]:indeterminate + label是这里的关键。当主复选框处于不确定状态时，它以主复选框的标签为目标，更改其颜色以指示部分选择。CSS 的其余部分提供了一般的美学调整。

引入 JavaScript 交互

const checkAll = document.getElementById('category');
const checkboxes = document.querySelectorAll('input.subCategory');
 
checkboxes.forEach(checkbox = >{
  checkbox.addEventListener('click', () = >{
    const checkedCount = document.querySelectorAll('input.subCategory:checked').length;
 
    checkAll.checked = checkedCount > 0;
    checkAll.indeterminate = checkedCount > 0 && checkedCount < checkboxes.length;
  });
});
 
checkAll.addEventListener('click', () = >{
  checkboxes.forEach(checkbox = >{
    checkbox.checked = checkAll.checked;
  });
});

这里的 JavaScript 代码根据所选的子选项管理主复选框的状态。主复选框进入中间状态，当选择某些子选项时，会显示一条水平线，如 Windows 上 Chrome 的样式。当所有子选项都被选中后，主复选框将恢复原来的颜色并进入选中状态。

最终结果

当选择每个杂货项目时，主“杂货”复选框在状态之间交替，反映子项目的选择状态。这为用户创建了有关选择状态的清晰视觉提示。

我们通过 HTML、CSS 和 JavaScript 混合进行的演示只是您可以用来增强 UI 清晰度的众多工具之一。不要停在这里 – 考虑如何使用其他 CSS 伪类（如:hover、:focus或 ）:active为用户提供实时反馈。当您扩展网页设计工具包时，请记住，目标是创建不仅具有视觉吸引力而且能够与受众进行有效沟通的用户体验。