如何为选中状态的输入表单字段添加轮廓？

可以通过CSS的:focus伪类来为选中的输入框添加轮廓，常见有两种实用实现方式：

1. 原生轮廓（outline） #

这是最直接的方案，不会改变元素布局：

input:focus {
  /* 自定义轮廓的宽度、样式、颜色 */
  outline: 2px solid #2196F3;
  /* 可选：设置轮廓与输入框的间距 */
  outline-offset: 2px;
}

如果检查元素时没找到对应样式，大概率是浏览器默认outline被全局样式重置（比如用了outline: none），或者当前样式被更高优先级的规则覆盖。可以临时添加!important排查问题（不推荐长期使用，建议调整选择器优先级来解决冲突）。

2. 阴影模拟轮廓（box-shadow） #

如果需要更柔和的视觉效果，可用阴影替代原生轮廓：

input:focus {
  /* 阴影参数：水平偏移、垂直偏移、模糊半径、扩散半径、颜色 */
  box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.3);
  /* 若不需要原生轮廓，可隐藏 */
  outline: none;
}

注意：隐藏原生outline时，要保证阴影的对比度足够，符合无障碍访问标准，让键盘导航用户能清晰识别选中状态。

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