CSS中:checked和:disabled样式应用详解

小伙伴们对文章编程感兴趣吗？是否正在学习相关知识点？如果是，那么本文《CSS中:checked和:disabled伪类用于控制表单元素的样式，以下是它们的应用方法：1. :checked 伪类:checked 用于选择被选中的表单元素，如 <input type="radio">、<input type="checkbox"> 或 <input type="range"> 等。示例：/* 选中时的样式 */ input[type="checkbox"]:checked { background-color: green; border: 2px solid #000; }HTML 示例：<input type="checkbox" id="agree">我同意条款2. :disabled 伪类:disabled 用于选择被禁用的表单元素，如 <input>、、<select> 等。示例：/* 禁用时的样式 */ input:disabled { background-color: #ccc; color: #999; cursor: not-allowed; }HTML 示例：<input type="text" disabled>3. 结合使用你可以将这两个伪类结合使用，来设置不同状态下的样式。示例： /* 启用且选中的样式 */ input[type="checkbox"]:checked {》，就很适合你，本篇文章讲解的知识点主要包括。在之后的文章中也会多多分享相关知识点，希望对大家的知识积累有所帮助！</select>

:checked和:disabled伪类可直观展示表单选中与禁用状态，提升可读性与体验；前者用于radio、checkbox等选中样式，后者统一禁用元素视觉效果，结合label与兄弟选择器能实现无需JS的交互反馈，降低开发维护成本。

在表单设计中，使用CSS伪类选择器 :checked 和 :disabled 可以直观地反映用户交互状态，提升界面可读性和用户体验。这两个伪类分别针对被选中和被禁用的表单元素，无需JavaScript即可实现样式响应。

:checked 伪类 — 控制选中状态样式

:checked 适用于单选按钮（radio）、复选框（checkbox）以及下拉菜单中的选中选项（option）。当用户选中某个控件时，该伪类会自动激活。

• 改变复选框或单选按钮的视觉样式（如背景、边框）
• 配合标签（label）实现自定义控件外观
• 控制关联内容的显示与隐藏（通过相邻兄弟选择器）

示例：自定义复选框样式

input[type="checkbox"]:checked + label {
  background-color: #4CAF50;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
}

此代码会让用户选中复选框后，其后的 label 背景变绿，文字变白，增强反馈感。

:disabled 伪类 — 样式化禁用状态

:disabled 用于匹配所有被设置为 disabled 属性的表单元素，如 input、textarea、select、button 等。这类元素通常不可交互。

• 降低透明度，表示“不可用”
• 更改背景色或文字颜色，使其与可用状态区分
• 移除边框阴影等交互效果

示例：统一禁用输入框样式

input:disabled,
textarea:disabled {
  opacity: 0.6;
  background-color: #f0f0f0;
  color: #999;
  cursor: not-allowed;
}

这样能让用户一眼识别出哪些字段当前无法操作。

结合使用提升交互体验

在实际项目中，常将 :checked 和 :disabled 结合 JavaScript 或结构设计，实现更复杂的交互逻辑。

• 选中某个选项后，禁用其他相关控件
• 根据复选框是否选中，切换按钮的启用/禁用状态，并同步样式

即使不写JS，也可利用 和 :checked 配合 ~ 选择器控制页面区块显隐，实现纯CSS的开关面板。

终于介绍完啦！小伙伴们，这篇关于《CSS中:checked和:disabled样式应用详解》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！