如何通过CSS移除移动端文本输入框顶部的灰色渐变

嘿，这个问题我之前做移动端项目时也踩过坑！这其实是iOS Safari和部分安卓浏览器给<input>、<textarea>这类表单元素默认加上的外观样式（包括顶部渐变、圆角甚至内阴影），咱们用几行CSS就能搞定：

核心修复代码 #

直接给目标输入元素添加以下样式，就能完全移除这些默认的渐变效果：

input[type="text"],
textarea {
  /* 清除WebKit内核浏览器的默认外观 */
  -webkit-appearance: none;
  /* 标准属性，覆盖现代浏览器 */
  appearance: none;
  /* 重置背景色，避免残留渐变痕迹 */
  background-color: transparent;
  /* 可选：如果不需要默认边框/阴影，也一起重置 */
  border: none;
  box-shadow: none;
}

额外说明 #

• 如果只是想移除渐变，不想改动边框等其他样式，可以只保留-webkit-appearance: none;、appearance: none;和background-color这几个属性。
• 部分浏览器可能还会给占位文本加样式，要是需要统一占位符的外观，可以额外加这段：

input[type="text"]::placeholder,
textarea::placeholder {
  color: #999; /* 换成你需要的颜色即可 */
}

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