CSS中checked伪类效果实现方法

本篇文章向大家介绍《CSS中checked伪类交互效果实现》，主要包括，具有一定的参考价值，需要的朋友可以参考一下。

:checked伪类通过选中状态触发样式变化，结合label和兄弟选择器可实现自定义复选框、展开收起面板及主题切换等交互效果，核心是隐藏input、用label控制状态并以CSS响应。

在CSS中，:checked 伪类可以用来选择处于“选中”状态的单选按钮（radio）或复选框（checkbox）。虽然它本身不能直接响应用户的交互动作，但结合HTML标签和相邻兄弟选择器等机制，可以实现无需JavaScript的交互式界面效果。

基本原理：利用 :checked 状态切换样式

:checked 会匹配所有被用户选中的 <input type="radio"> 或 <input type="checkbox"> 元素。一旦这些输入控件被勾选，就可以通过CSS改变它们自身或关联元素的外观。

• 隐藏原始输入框，用自定义样式替代
• 通过 label 标签控制 input 的选中状态
• 使用 + 或 ~ 选择器影响后续元素的显示

示例1：自定义复选框样式

将默认的 checkbox 替换为视觉更美观的样式。

<input type="checkbox" id="custom-checkbox">
<label for="custom-checkbox">点击我</label>

#custom-checkbox {
  display: none;
}

#custom-checkbox + label {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid #ccc;
  border-radius: 4px;
  position: relative;
  cursor: pointer;
}

#custom-checkbox:checked + label::after {
  content: "✔";
  color: #4CAF50;
  font-size: 16px;
  position: absolute;
  top: -1px;
  left: 3px;
}

当用户点击 label 时，checkbox 被选中，:checked 生效，显示对勾符号。

示例2：展开/收起内容区域

使用 checkbox 和 :checked 实现可折叠面板。

<input type="checkbox" id="toggle-content" style="display:none;">
<label for="toggle-content">点击展开内容</label>
<div class="content">
  这里是被隐藏的内容。
</div>

.content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

#toggle-content:checked ~ .content {
  max-height: 100px;
}

利用 ~ 通用兄弟选择器，在 checkbox 被选中时，动态改变后面内容块的高度，实现平滑展开动画。

示例3：单选按钮切换主题风格

用 radio 按钮切换页面配色方案。

<input type="radio" name="theme" id="light" checked>
<label for="light">浅色</label>

&lt;input type=&quot;radio&quot; name=&quot;theme&quot; id=&quot;dark&quot;&gt;
<label for="dark">深色</label>

<div class="theme-area">
  页面内容
</div>

#dark:checked ~ .theme-area {
  background: #333;
  color: white;
}

#light:checked ~ .theme-area {
  background: white;
  color: black;
}

通过两个互斥的 radio 按钮，控制同一区域的不同视觉表现。

基本上就这些。利用 :checked 配合 label 和选择器，能实现开关、菜单、选项卡甚至轻量级模态框等交互效果，适合静态页面或需要减少JS依赖的场景。关键是把 input 隐藏，用 label 做触发入口，再用CSS响应状态变化。

以上就是《CSS中checked伪类效果实现方法》的详细内容，更多关于的资料请关注golang学习网公众号！