移动端HTML页面输入框出现非预期边框该如何消除

问题复现效果 #

样式产生原因 #

该边框是WebKit内核移动端浏览器（含安卓原生浏览器、各APP内置浏览器）的默认交互样式，由两部分触发：

• 点击可交互元素时的默认高亮遮罩
• 输入框获得焦点时的默认轮廓线/阴影效果

解决代码 #

在全局CSS中插入以下规则即可完全覆盖默认样式：

/* 全局消除点击高亮 */
* {
  -webkit-tap-highlight-color: transparent;
}

/* 消除输入类元素默认聚焦边框 */
input, textarea, select {
  outline: none;
}

/* 兼容高版本浏览器的focus-visible默认样式 */
input:focus, input:focus-visible,
textarea:focus, textarea:focus-visible,
select:focus, select:focus-visible {
  outline: none;
  box-shadow: none;
}

优化建议 #

如果需要兼顾无障碍可访问性，避免用户无法识别输入框是否处于聚焦状态，可以自定义聚焦样式替代默认边框，例如：

input:focus {
  border: 1px solid #1677ff;
}

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