HTML单选按钮选中过渡效果的实现教程-html教程-PHP中文网

纯css可实现单选按钮选中过渡效果，但必须作用于label或伪元素而非input本身；因:checked是布尔状态无中间值，input不支持transition和伪元素，需用input:checked + label控制样式过渡。

html单选按钮选中过渡效果的实现教程

纯 CSS 实现单选按钮选中过渡效果是可行的，但必须绕过原生 <input type="radio"> 的视觉限制——它本身不支持 transition，真正能加过渡的是它的关联 label 或自定义伪元素。

为什么直接给 `input[type="radio"]` 加 `transition` 没用

原生单选按钮的渲染由浏览器控制，:checked 状态切换是布尔突变，没有中间状态；CSS transition 只对可动画属性（如 opacity、background-color、transform）起作用，而 input 元素默认不可见且不参与布局动画。

即使写了 input[type="radio"] { transition: all 0.3s; }，也不会产生任何过渡效果
:checked 本身不是“可过渡属性”，它是状态开关，不是数值变化
所有视觉过渡必须落在 label、::before、::after 这类可样式化且可动画的载体上

`:checked + label` 配合 `transition` 是最简可靠方案

前提是 HTML 结构满足 <input> 紧邻 <label></label> 之前，且两者同级、无其他兄弟节点插入。

把 input 设为 display: none，完全隐藏原生控件
用 input:checked + label 选择被选中的 label，对其添加背景、边框、阴影等可过渡属性
在 label 上声明 transition: background-color 0.25s ease, box-shadow 0.25s ease
确保未选中态的 label 也有对应基础样式（比如默认 background-color: #fff），否则过渡会从“无样式”跳变

示例关键 CSS：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

input[type="radio"] {
  display: none;
}
label {
  padding: 10px 20px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
input:checked + label {
  background-color: #4285f4;
  border-color: #4285f4;
  box-shadow: 0 0 8px rgba(66, 133, 244, 0.3);
}

用 `::before` / `::after` 做圆点动画要小心层级和触发时机

如果想让“选中圆点”有缩放或颜色渐变效果，必须把动画逻辑放在伪元素上，并确保它受 :checked 控制，而不是依赖 JS。

不要写 input:checked::before —— 原生 input 不支持伪元素
正确做法：在 label::before 上画默认圆点，再用 input:checked + label::before 修改其 transform 和 background-color
注意 label::before 必须设 content: ""、display: inline-block，并用 position: absolute 定位，否则无法独立动画
若用 scale()，记得同时设置 transform-origin，否则缩放中心可能偏移