纯 CSS 选定项和禁用项

本文介绍如何使用纯 CSS 创建选定项和禁用项效果。使用纯 CSS 实现这些效果可以减少对 JavaScript 的依赖，提高网页性能和用户体验。

选定项

要使用纯 CSS 创建选定项效果，可以使用 :checked 伪类选择器。该选择器可用于选择已选中的输入框、复选框或单选按钮。

以下是一个示例代码，展示如何使用纯 CSS 创建选定项效果：

<!-- HTML -->
<input type="checkbox" id="checkbox">
<label for="checkbox">选项</label>

/* CSS */
input[type="checkbox"]:checked + label {
  font-weight: bold;
  color: blue;
}

在上面的示例中，使用 :checked 选择器选中已选中的复选框，并使用相邻兄弟选择器 (+) 选择位于复选框后面的标签。通过设置选中状态下的标签样式，我们可以创建选定项效果。在这个例子中，已选中的复选框会使标签的字体加粗并显示蓝色。

禁用项

要使用纯 CSS 创建禁用项效果，可以使用 :disabled 伪类选择器。该选择器可用于选择被禁用的输入框、复选框、单选按钮或按钮。

以下是一个示例代码，展示如何使用纯 CSS 创建禁用项效果：

<!-- HTML -->
<input type="text" id="input" disabled>
<label for="input">禁用项</label>

/* CSS */
input:disabled + label {
  opacity: 0.5;
  cursor: not-allowed;
}

在上面的示例中，使用 :disabled 选择器选中被禁用的输入框，并使用相邻兄弟选择器选择位于输入框后面的标签。通过设置禁用状态下的标签样式，我们可以创建禁用项效果。在这个例子中，被禁用的输入框会使标签的透明度减半并显示禁用样式的光标。

总结

通过使用 :checked 和 :disabled 伪类选择器，我们可以使用纯 CSS 创建选定项和禁用项效果。这些技术可以减少对 JavaScript 的依赖，提高网页性能和用户体验。

请记住，在实际开发中，根据需要使用这些技术来创建各种用户界面效果。以上示例仅为演示目的，您可以根据实际需求进行样式修改和扩展。

以上就是本文关于纯 CSS 选定项和禁用项的介绍。希望对程序员们有所帮助！