CSS如何用:checked修改选中颜色

想要用CSS改变选中颜色？`:checked`伪类帮你轻松实现！本文深入解析CSS中`:checked`伪类的强大功能，它能精准控制单选框、复选框等表单元素选中时的样式。无需JavaScript，即可实现复选框文本变色、自定义开关按钮以及显示隐藏内容等动态效果。文章详细讲解了`:checked`的基本用法，结合`label`标签和兄弟选择器，教你打造美观且交互性强的网页组件。兼容IE9+和现代浏览器，让你的网页在各种设备上都能呈现最佳效果。快来学习如何利用`:checked`伪类提升你的CSS技能，让网页设计更上一层楼！

:checked伪类用于控制选中状态的表单元素样式，可实现复选框文本变色、自定义开关按钮及显示隐藏内容等交互效果，结合label和兄弟选择器能脱离JavaScript完成动态样式切换，兼容IE9+和现代浏览器。

在CSS中，:checked 是一个非常实用的伪类选择器，主要用于单选按钮（radio）、复选框（checkbox）以及下拉选项（option）等表单元素被选中时的样式控制。通过它，我们可以实现不依赖JavaScript的交互式视觉效果，比如改变选中项的颜色、显示隐藏内容或切换开关样式。

1. :checked 伪类的基本用法

:checked 只在表单控件处于“选中”状态时生效。常见使用场景是配合 input[type="checkbox"] 或 input[type="radio"]。

示例：让选中的复选框旁边的文本变色：

我同意条款

CSS代码：

#agree:checked + label {
    color: green;
}

说明：当复选框被勾选时，其后紧跟的 label 文字颜色变为绿色。

2. 结合 label 实现自定义样式

由于原生的 input 样式难以美化，通常会隐藏原始输入框，用 label 来模拟按钮或开关，并通过 :checked 控制样式变化。

示例：创建一个简单的开关按钮

.toggle-input {
    display: none;
}
.toggle-label {
    width: 60px; height: 30px;
    background-color: #ccc;
    border-radius: 15px;
    position: relative;
    cursor: pointer;
}
.toggle-label::after {
    content: '';
    position: absolute;
    width: 26px; height: 26px;
    background: white; border-radius: 50%;
    top: 2px; left: 4px;
    transition: left 0.3s;
}
.toggle-input:checked + .toggle-label {
    background-color: #4CAF50;
}
.toggle-input:checked + .toggle-label::after {
    left: 34px;
}

此时点击 label，会触发 checkbox 的选中状态，从而改变背景色和滑块位置，实现视觉上的开关效果。

3. 控制其他元素的显示或样式

利用相邻兄弟选择器（+）或通用兄弟选择器（~），可以控制页面中其他非表单元素的外观。

示例：点击复选框显示一段说明文字

这是一段额外信息

.info-text {
    display: none;
}
#show-info:checked ~ .info-text {
    display: block;
    color: #333;
}

当复选框被选中时，后面的 .info-text 段落会显示出来。

4. 注意事项与兼容性

• :checked 支持现代主流浏览器，包括 IE9+，移动端完全支持。
• 必须确保 label 的 for 属性正确指向 input 的 id，否则无法触发交互。
• 隐藏原始 input 推荐使用 display: none 或视觉移位技巧，避免影响可访问性。
• 结合 transition 可以让颜色或位置变化更平滑，提升用户体验。

本篇关于《CSS如何用:checked修改选中颜色》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！