纯css能彻底改写表单视觉语言，关键在于重置默认样式（如box-sizing: border-box、appearance: none）、统一跨平台表现，并通过label+input语义结构保留可访问性；需用伪元素重绘radio/checkbox，严格同步:checked/:disabled状态，确保焦点、悬停、激活等交互反馈完整且可预测。
纯CSS能彻底改写表单的视觉语言，但关键不是堆效果，而是控制浏览器默认行为、统一跨平台表现、并保留语义与可访问性。直接上手前先确认：所有样式必须基于标准 <label></label> + <input> 结构，否则美化会断掉焦点联动和屏幕阅读器支持。
重置默认样式再动手
浏览器对 input、select、textarea 的默认边框、内边距、字体、盒模型各不相同，不重置就等于在流沙上盖楼。
- 全局加
box-sizing: border-box—— 否则width: 100%+padding会导致溢出 - 用
all: unset或逐项清除border、outline、margin、font，避免残留干扰 - 特别注意
appearance: none必须配合background和自定义箭头（background图片或clip-path），否则select在 Safari 里仍显示原生控件
让文本框有呼吸感
输入框不是“容器”，是用户停留最久的交互点。视觉反馈要轻、准、可预测。
-
padding至少设为10px，小于这个值手指点击易误触相邻元素 -
border-radius推荐6px～8px，过大会削弱边界识别，过小无感 -
:focus状态必须改border-color或加box-shadow，不能只靠outline: none—— 否则键盘用户完全看不到焦点在哪 -
::placeholder颜色别用#999，对比度至少 4.5:1，推荐#aaa或更浅的灰
单选/复选框必须用伪元素重绘
原生 input[type="radio"] 和 input[type="checkbox"] 几乎无法直接样式化，强行改 border 或 background 在 Chrome/Firefox/Safari 表现不一致，且禁用状态失效。
- 先隐藏原生控件：
input[type="checkbox"], input[type="radio"] { appearance: none; } - 用
label::before或label::after绘制自定义图形，配合input:checked + label::before切换状态 - 务必保留
for/id关联，否则点击文字无法触发选中 - 禁用状态（
input:disabled）要同步作用于伪元素，不然用户会误以为还能操作
按钮状态不能只靠:hover
提交按钮是表单唯一动作出口，它的状态变化必须覆盖鼠标、键盘、触屏三类输入方式。
-
:hover只解决鼠标悬停，:focus解决键盘 Tab 进入，:active解决点击瞬间压感 - 禁用状态
:disabled要同时降级background-color、color和cursor，别只改 opacity —— 屏幕阅读器可能忽略透明度变化 - 移动端点击反馈建议加
transition: background-color 0.1s，比:active更快响应 - 不要给按钮设固定
height，优先用padding控制尺寸，适应不同字号缩放
最难的不是画得多漂亮，而是让每个状态切换都可预期、可回溯、不打断用户流程。比如 select 展开时焦点丢失、checkbox 用空格切换后没视觉反馈、表单验证失败时错误提示被 z-index 挡住——这些问题全在 CSS 层就能埋下伏笔，也全能在 CSS 层提前堵死。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
