如何移除input元素的3D边框效果与点击聚焦效果？

要实现input的扁平化外观，只设置input:focus {border: none;}不够，因为浏览器给input自带了不少默认样式——比如默认的3D边框样式、聚焦时的outline高亮甚至box-shadow，得把这些都覆盖掉才能达到效果：

完整CSS代码示例 #

/* 重置基础样式，去除默认3D边框 */
input {
  /* 替换默认3D边框为扁平化样式，不需要边框直接设为none即可 */
  border: 1px solid #ccc;
  /* 移除浏览器原生控件的默认外观，避免系统级3D效果 */
  -webkit-appearance: none;
  appearance: none;
  /* 可选：统一内边距和背景，按需调整 */
  padding: 8px;
  background: #fff;
}

/* 处理聚焦状态，移除高亮效果 */
input:focus {
  /* 去掉边框（按需保留的话可删这行） */
  border: none;
  /* 关键：移除浏览器聚焦时的默认outline外框 */
  outline: none;
  /* 部分浏览器会加聚焦阴影，一并清除 */
  box-shadow: none;
}

关键说明 #

• -webkit-appearance: none; 和 appearance: none;：消除Chrome、Safari等浏览器自带的原生控件样式，彻底去掉3D边框这类默认视觉效果。
• outline: none;：大部分浏览器的input聚焦提示是靠outline实现的，不是border，这也是你之前的代码没生效的核心原因。
• 所有样式都可以根据需求调整，比如不需要边框就直接把input的border设为none，背景色也可以换成你需要的扁平化色调。

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