如何修改input type="number"输入框焦点时的蓝色外发光颜色？

当然可以修改！浏览器默认的焦点高亮（外发光/边框）是通过CSS的outline属性或者box-shadow（部分浏览器用这个实现外发光）控制的，直接针对:focus伪类写样式就能覆盖默认效果。

方法1：替换默认边框式高亮（修改outline） #

如果浏览器默认用outline实现焦点边框，直接设置该属性即可：

.number:focus {
  /* 替换为你需要的颜色，这里用红色示例 */
  outline: 2px solid #ff0000;
  /* 可选：调整高亮边框和输入框的间距 */
  outline-offset: 2px;
}

方法2：替换默认外发光效果（修改box-shadow） #

部分浏览器用box-shadow实现模糊外发光，这种情况可以自定义阴影样式：

.number:focus {
  /* 先去掉默认outline避免样式冲突 */
  outline: none;
  /* 自定义外发光：依次是水平偏移、垂直偏移、模糊半径、扩散半径、颜色 */
  box-shadow: 0 0 5px 2px #4CAF50;
}

重要提示 #

• 不要只写outline: none却不添加替代焦点样式，这会严重影响可访问性，键盘用户无法直观识别当前聚焦的元素。
• 不同浏览器的默认焦点实现可能有差异，建议同时处理outline和box-shadow，确保在各浏览器中效果一致。

把上述CSS代码添加到你的样式文件中，就能替换掉默认的蓝色焦点效果了。

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