如何解决Chrome中CSS圆角边框的怪异角落问题？

成因分析 #

• Chrome浏览器对type="text"和type="password"输入框的默认内置样式存在差异，用户名输入框可能继承了额外的outline、box-shadow或浏览器私有伪元素样式，导致边角出现异常白边。
• 输入框触发自动填充（autocomplete）时，Chrome会为填充后的输入框添加特殊样式，该样式可能与自定义CSS冲突，产生未被覆盖的空白区域。
• 自定义CSS中的border-radius属性与Chrome输入框内部渲染逻辑不兼容，导致边角区域的默认样式未被完全覆盖。

CSS修复方法 #

1. 统一输入框基础样式

重置浏览器默认样式，强制统一所有输入框的视觉表现：

input[type="text"], input[type="password"] {
  outline: none;
  box-shadow: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  /* 可选：确保输入框内边距一致，避免布局偏移 */
  padding: 8px 12px;
}

2. 修复自动填充样式冲突

针对Chrome自动填充的特殊样式，使用优先级更高的规则覆盖：

input[type="text"]:-webkit-autofill,
input[type="text"]:-webkit-autofill:hover,
input[type="text"]:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 30px #fff inset !important;
  -webkit-text-fill-color: #000 !important;
  border: 1px solid #ccc !important;
  border-radius: 4px !important;
}

3. 清理浏览器私有伪元素

若问题由浏览器附加的伪元素导致，直接隐藏这些元素：

input[type="text"]::-webkit-inner-spin-button,
input[type="text"]::-webkit-outer-spin-button {
  display: none;
}
input[type="text"]::-webkit-search-decoration {
  display: none;
}

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