CSS美化复选框单选按钮教程

想让网页表单告别千篇一律的原生样式？本文手把手教你用纯CSS美化复选框与单选按钮——通过隐藏默认控件、巧用伪元素（::before/::after）绘制自定义图形，并结合:checked、:hover、:focus等状态实现平滑动画、键盘可访问、跨浏览器一致的现代交互体验，无需JavaScript即可打造出符合品牌调性、兼顾美观与无障碍的高质感表单控件。

美化表单中的复选框（checkbox）和单选按钮（radio）能让页面看起来更现代、统一。默认的原生样式在不同浏览器中表现不一致，通过CSS可以完全自定义它们的外观。核心思路是隐藏原始输入框，用CSS绘制新的视觉元素。

1. 隐藏原始输入框

使用 opacity: 0 或 appearance: none 隐藏原生控件，同时保留其功能（可点击、可聚焦）。

• 将原始 input 设置为透明且占据相同位置
• 用 label 搭配伪元素（::before / ::after）绘制自定义图形
• 利用 :checked 选择器切换样式状态

2. 自定义复选框样式

以下是一个简洁美观的方形复选框示例：

<input type="checkbox" id="agree">
<label for="agree">我同意条款</label>

关键点：

• ::before 绘制外框
• ::after 在选中时显示对勾
• transition 添加平滑动画

3. 自定义单选按钮样式

圆形 radio 按钮可通过 border-radius 实现：

<input type="radio" name="theme" id="light" class="custom-radio">
<label for="light">浅色主题</label>

技巧：

• 未选中时只显示外圈
• 选中后在中心添加实心圆点
• 颜色搭配保持品牌一致性

4. 提升交互体验

增加 hover 和 focus 效果提升可用性：

• 鼠标悬停时轻微变色：hover 改变边框或背景
• 键盘导航支持：focus 添加 outline 样式
• 禁用状态处理：结合 :disabled 设置灰色不可点

例如：

.custom-checkbox + label:hover::before,
.custom-radio + label:hover::before {
  border-color: #007acc;
}

.custom-checkbox:focus + label::before {
  box-shadow: 0 0 0 2px rgba(0,122,204,.3);
}

基本上就这些。掌握这个模式后，你可以自由设计各种风格——Material Design、iOS 风、扁平化等都能实现。关键是结构清晰、语义正确、可访问性强。不复杂但容易忽略细节。

好了，本文到此结束，带大家了解了《CSS美化复选框单选按钮教程》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！