应保留outline保障键盘可访问性，用:focus-visible替代:focus实现仅键盘聚焦样式；统一box-sizing: border-box防圆角溢出；::placeholder需全前缀显式设色；disabled状态优先用opacity而非color控制。
outline在focus时总不消失？先搞清它和border的渲染层级
表单输入框（、）获得焦点后默认有蓝色或紫色的outline，很多人直接写outline: none想干掉它，结果发现键盘导航（Tab键）下可访问性崩了——这不是bug，是浏览器故意留的无障碍保障。
真正该做的是：用border模拟聚焦态，同时保留outline的“仅键盘可见”逻辑。现代做法是：
-
outline: none只在鼠标点击后生效，不影响键盘聚焦 - 用
:focus-visible替代:focus来加样式，它只在键盘触发时匹配 - 如果不用
:focus-visible（兼容IE/旧版Safari），就老实用:focus+outline: 2px solid #007bff这类可读性强的颜色，别全砍
border-radius圆角和box-sizing怎么配才不溢出
给input加border-radius时，常出现圆角被裁掉、内边距错位、甚至文字贴边——根本原因是没统一box-sizing。默认box-sizing: content-box会让padding和border撑大元素尺寸，而border-radius只作用于border box边界。
稳妥写法就是强制重置：
- 所有表单控件统一设
box-sizing: border-box -
border-radius值别超过height的一半，比如height: 40px时，border-radius: 6px安全，20px就容易变椭圆或失效 - 如果用了
border: 2px solid #ddd，又想保持整体高度不变，就得把height减去4px（上下border各2px）
placeholder文字颜色太浅？伪元素样式要单独处理
::placeholder不是通用选择器，各浏览器前缀不同，而且它不继承父级color，必须显式设置。更麻烦的是，一旦你给input加了border和background，placeholder默认灰度（#999）在深背景上几乎看不见。
实操要点：
- 必须写全前缀：
::placeholder、::-webkit-input-placeholder、::-moz-placeholder、:-ms-input-placeholder - 颜色别用
#aaa这种弱对比，至少#666或rgba(0,0,0,0.5) - 不要对
::placeholder设font-weight或font-size——它只支持color、opacity、font相关基础属性
disabled状态样式被忽略？优先级和透明度陷阱
给input:disabled设background: #f5f5f5和color: #999后，有时文字还是黑色、背景也没变——常见原因有两个：一是CSS权重不够，被其他规则覆盖；二是某些浏览器（特别是Chrome）对disabled输入框的color强制应用了系统灰度，靠!important都未必顶用。
可靠方案：
- 用
input:disabled { background-color: #f5f5f5 !important; }保底，但别滥用!important在其它地方 -
color改不动时，换opacity: 0.7更稳，它绕过系统强制逻辑 - 别忘了同步处理
cursor: not-allowed，否则用户会误以为还能点
最易被忽略的其实是:focus-visible的渐进增强逻辑——它不光是美化问题，而是决定你的表单在键盘用户手里是否可用。border和outline混用时，别只盯着视觉，先看焦点环有没有真消失、Tab顺序有没有断。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
