暗色表单里输入框和页面背景几乎同色,用户不知道哪里能点,聚焦后也只有很淡的一圈。第一次遇到会往复杂处想,其实漏掉的多是个小前提。
[data-theme='dark'] input {
background: #232a33; border: 1px solid #3a4350;
}
[data-theme='dark'] input:focus { outline: 2px solid #4c8dff; }
输入框边框用了 #2a2a2a,背景 #222,两者亮度差太小。聚焦态只改了边框颜色,没有加外圈提示。这一点先确认清楚,后面就不用反复试。
「暗色输入框边框」相关的日志我一般连着看前后五分钟,单看一条报错经常判断不出是哪一步失败。把复现步骤压到三条以内,交给同事也能跑出来,才算真的定位清楚。
改动写完就同步给同事,下一个人踩同一个坑,成本还是你的。验证用真实数据走一遍,测试数据太干净,边界情况根本碰不到。
能分两步做的操作就别合成一步,中间看一眼返回值,出问题好判断。
具体做法是,输入框背景比页面提亮一档 边框再加一档;聚焦时用 outline 或 ring 拉开明显差异;在暗色下逐个点开表单 确认每个字段边界可见。
改完照着核一遍,暗色下输入框边界清楚,聚焦时有一圈明显的蓝边。
