当前位置：首页 > 文章列表 > 文章 > 前端 > :checked选择器使用技巧全解析

:checked选择器使用技巧全解析

2026-03-25 19:05:35 0浏览收藏

`:checked`伪类是CSS中实现无JavaScript交互的利器，通过巧妙结合HTML结构与CSS选择器（如`+`和`~`），不仅能轻松控制内容显隐、打造高度自定义的复选框和滑动开关，还能构建多级菜单与选项卡切换等复杂UI效果；它以零JS依赖、高性能响应和跨浏览器一致性，为前端开发提供了一种简洁而强大的交互解决方案——原来纯CSS也能让页面“活”起来。

在css中:checked复选框伪类使用技巧

:checked 是 CSS 中一个非常实用的伪类选择器，主要用于匹配处于“选中状态”的单选按钮（radio）或复选框（checkbox）。虽然它本身不能改变表单元素的逻辑行为，但结合 HTML 和 CSS 可以实现丰富的视觉交互效果。以下是几个常见的使用技巧和实用场景。

1. 控制其他元素的显示与隐藏

利用 :checked 配合相邻兄弟选择器（+）或通用兄弟选择器（~），可以控制页面中其他元素的显示或隐藏，无需 JavaScript。

例如：点击复选框展开/收起内容区域。

&lt;input type=&quot;checkbox&quot; id=&quot;toggle&quot;&gt;
<label for="toggle">点击展开内容</label>
<div class="content">这里是被隐藏的内容</div>

#toggle + .content {
  display: none;
}
#toggle:checked + .content {
  display: block;
}

这样，当复选框被选中时，后面的 .content 就会显示出来。

2. 制作自定义样式复选框

默认的复选框样式在不同浏览器中表现不一致。:checked 可以配合隐藏原生控件，用 CSS 绘制更美观的自定义样式。

&lt;input type=&quot;checkbox&quot; id=&quot;custom-checkbox&quot;&gt;
<label for="custom-checkbox" class="custom-checkbox"></label>

#custom-checkbox {
  display: none;
}
.custom-checkbox {
  width: 18px;
  height: 18px;
  border: 2px solid #ccc;
  display: inline-block;
  position: relative;
  cursor: pointer;
}
#custom-checkbox:checked + .custom-checkbox::after {
  content: "✔";
  color: #4CAF50;
  font-size: 14px;
  position: absolute;
  top: -2px;
  left: 2px;
}

通过隐藏原始 input，使用 label 模拟点击，并用 ::after 添加对勾符号，实现跨浏览器一致的视觉效果。

3. 实现开关（Toggle Switch）效果

将复选框变成现代风格的滑动开关，提升界面体验。

&lt;input type=&quot;checkbox&quot; id=&quot;switch&quot;&gt;
<label for="switch" class="switch"></label>

.switch {
  width: 50px;
  height: 24px;
  background: #ddd;
  border-radius: 12px;
  position: relative;
  display: inline-block;
  transition: background 0.3s;
}
.switch::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: white;
  top: 2px;
  left: 2px;
  transition: left 0.3s;
}
#switch:checked + .switch {
  background: #4CAF50;
}
#switch:checked + .switch::after {
  left: 28px;
}

选中时背景变绿，小圆球滑动到右侧，形成典型的开关样式。

4. 多级菜单或选项卡切换

使用多个 radio 或 checkbox，结合 :checked 和 ~ 选择器，可实现无 JS 的选项卡或折叠菜单。

例如：用 radio 模拟单选选项卡：

&lt;input type=&quot;radio&quot; name=&quot;tab&quot; id=&quot;tab1&quot; checked&gt;
<label for="tab1">首页</label>

&lt;input type=&quot;radio&quot; name=&quot;tab&quot; id=&quot;tab2&quot;&gt;
<label for="tab2">设置</label>

<div class="panel" id="home">首页内容</div>
<div class="panel" id="settings">设置内容</div>

.panel { display: none; }
#tab1:checked ~ #home,
#tab2:checked ~ #settings {
  display: block;
}

通过 ~ 选择器选中对应面板，实现简单的标签页切换。

基本上就这些。合理使用 :checked 能减少对 JavaScript 的依赖，提升页面响应速度，同时让交互更直观。关键是结构要清晰，input 必须在相关元素之前或附近，确保选择器能正确匹配。不复杂但容易忽略细节。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《:checked选择器使用技巧全解析》文章吧，也可关注golang学习网公众号了解相关技术文章。

PHP网站实现搜索功能的步骤如下：创建数据库表确保有存储数据的数据库表，例如products表，包含id,name,description等字段。设计搜索表单在HTML页面中添加一个搜索表单，提交到处理脚本（如search.php）。<formaction="search.php"method="get"><inputtype="text"name="query"placehol

上一篇: PHP网站实现搜索功能的步骤如下：创建数据库表确保有存储数据的数据库表，例如products表，包含id,name,description等字段。设计搜索表单在HTML页面中添加一个搜索表单，提交到处理脚本（如search.php）。<formaction="search.php"method="get"><inputtype="text"name="query"placehol

下一篇: PPT统一设置所有页面背景方法

查看更多