这个问题是Safari移动端特有的表单元素默认样式行为，你之前尝试的outline:none针对的是焦点外边框，而这个蓝色下划线属于文本装饰或自动填充相关的样式，所以没起作用。试试下面这些针对性的方案：

• 方案一：全面重置输入框的文本装饰与自动填充样式
  这个方案覆盖了输入框正常状态、聚焦状态、自动填充状态下的样式，能彻底消除可能触发下划线的源头：

  input,
  input:focus,
  input:-webkit-autofill,
  input:-webkit-autofill:focus {
    /* 移除文本下划线 */
    text-decoration: none;
    -webkit-text-decoration: none;
    /* 重置自动填充的背景（避免自动填充带来的额外样式干扰） */
    -webkit-box-shadow: 0 0 0px 1000px #fff inset;
    box-shadow: 0 0 0px 1000px #fff inset;
    /* 确保焦点外边框完全移除 */
    outline: none;
    /* 额外兜底：如果下划线是底部边框伪装的，直接移除 */
    border-bottom: none;
  }
  

• 方案二：移除Safari特定的输入框伪元素样式
  Safari会给部分输入类型（比如搜索框）添加默认装饰元素，通过隐藏这些伪元素解决问题：

  /* 移除搜索输入框的默认装饰组件 */
  input::-webkit-search-decoration {
    display: none;
  }
  /* 确保占位符文本也不会出现下划线 */
  input::-webkit-input-placeholder {
    text-decoration: none;
  }
  

• 方案三：强制阻断文本装饰继承
  如果下划线是从父元素继承的文本装饰样式，直接强制覆盖：

  input {
    text-decoration: none !important;
    -webkit-text-decoration: none !important;
  }
  

建议先尝试方案一，大部分情况下都能解决Safari移动端这个恼人的下划线问题。如果还是不行，可以检查一下输入框是否有第三方UI框架的样式或父元素样式在冲突，优先调整样式优先级来覆盖默认行为。

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