如何移除或统一调整input、select输入框的outline轮廓样式

第一步：清除原生默认样式冲突 #

MacOS下Chrome会给表单控件默认加载系统级的原生外观和焦点轮廓，不同控件的原生规则不一致，首先要全局重置基础样式：

input, select, textarea, button {
  /* 清除webkit内核的原生控件外观 */
  -webkit-appearance: none;
  appearance: none;
  /* 清除所有默认自带的outline规则 */
  outline: none;
  /* 如果原有代码有用box-shadow模拟高亮的也一起清掉 */
  box-shadow: none;
}

第二步：统一定义焦点状态的轮廓样式 #

自定义所有表单控件聚焦时的outline规则，参数可根据需求调整：

input:focus, select:focus, textarea:focus, button:focus {
  /* 示例：统一2px宽的靛蓝色轮廓，2px外偏移，带圆角 */
  outline: 2px solid #4f46e5;
  outline-offset: 2px;
  border-radius: 4px;
}

第三步：排查原有代码的冲突规则 #

如果上述规则不生效，说明原代码中存在优先级更高的零散焦点样式定义：

• 打开Chrome开发者工具，选中对应控件，在「样式」面板勾选:focus状态模拟聚焦
• 查找所有和outline、box-shadow相关的规则，删掉冲突项或者调高你写的全局规则优先级

可选补充：select下拉箭头自定义 #

加了appearance: none后select的默认下拉箭头会消失，可以自己用背景图自定义统一的箭头样式，保证整体风格一致。

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