Chrome中CSS :focus伪选择器未按预期工作的问题排查

问题根源 #

你碰到的情况是：用React+styled-components做的表单，Firefox里输入框聚焦时标签能正常上移，但Chrome里标签一开始就待在最终位置，而且改:focus + span的颜色立马生效——这说明Chrome里输入框的焦点状态没正确重置，或者我们的样式逻辑没覆盖Chrome的渲染规则。

Chrome对表单元素的:focus和:placeholder-shown伪类处理和Firefox不一样，只靠:focus触发标签上移的话，不仅覆盖不了“输入框有内容但失焦”的场景，还会在Chrome里出现焦点状态异常的问题。

修复步骤 #

1. 给输入框加空占位符 #

在你的Input组件里，给input标签加个空的placeholder：

<input
  type={type}
  value={value}
  onChange={onChange}
  placeholder=" " // 必须加，不然下面的伪类不生效
/>

2. 更新styled-components的样式规则 #

把原来只靠:focus触发的样式，改成结合:focus和:not(:placeholder-shown)：

const Input = styled.input`
  // 你的原有样式不变，替换下面的触发规则
  &:focus + span,
  &:not(:placeholder-shown) + span {
    transform: translateY(-1.5rem);
    font-size: 0.8rem;
    color: #2196f3; // 这里可以自定义你要的颜色
  }
`;

const LabelText = styled.span`
  // 原有样式保留，确保加上过渡动画
  transition: all 0.2s ease;
`;

为什么这么做 #

• :not(:placeholder-shown)会在输入框有内容的时候触发，这样就算输入框失焦，只要有内容标签就不会掉回去，同时也能解决Chrome里焦点状态异常的问题。
• 空占位符是Chrome识别:not(:placeholder-shown)的前提，没有的话这个伪类不会生效。
• 保留:focus是为了输入框刚聚焦、还没输入内容时，标签能立刻上移，覆盖所有需要标签上浮的场景。

内容的提问来源于stack exchange，提问作者Christoper Chamberlain