在网页开发过程中，浏览器会为input输入框添加默认的样式，其中最常见的就是聚焦时的阴影和轮廓效果，这些默认样式往往会和自定义页面设计产生冲突，需要我们通过CSS手动去除。
默认阴影的来源
input输入框的默认阴影通常来自两个CSS属性，一个是box-shadow，另一个是outline。不同浏览器的默认样式规则略有差异，比如Chrome浏览器在输入框聚焦时会添加outline: -webkit-focus-ring-color auto 1px的样式，同时可能附带box-shadow效果，而Firefox浏览器也有自己的默认聚焦样式规则。
删除阴影的具体实现
基础去除方法
我们可以通过重置这两个属性来去除默认阴影，核心代码如下：
/* 去除所有input输入框的默认阴影和轮廓 */
input {
/* 去除盒阴影 */
box-shadow: none;
/* 去除聚焦时的轮廓 */
outline: none;
}
针对特定状态的优化
如果只需要去除聚焦时的阴影，而保留其他状态的默认样式，可以针对:focus伪类单独设置：
/* 仅去除聚焦状态的阴影 */
input:focus {
box-shadow: none;
outline: none;
}
兼容不同浏览器的处理
部分旧版本浏览器对outline的处理存在兼容问题，我们可以补充浏览器前缀的规则：
input {
box-shadow: none;
outline: none;
/* 兼容webkit内核浏览器 */
-webkit-appearance: none;
/* 兼容firefox浏览器 */
-moz-appearance: none;
}
注意事项
去除outline样式后，键盘用户聚焦输入框时将没有视觉反馈，会影响无障碍访问体验。如果需要兼顾无障碍需求，可以自定义聚焦样式替代默认效果：
input:focus {
box-shadow: none;
/* 自定义聚焦边框样式 */
border: 2px solid #409eff;
outline: none;
}
另外如果使用-webkit-appearance: none和-moz-appearance: none，可能会同时去除输入框的其他默认样式，比如下拉箭头等，需要根据实际需求选择性使用。
效果验证
我们可以通过简单的HTML结构测试样式是否生效：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>input阴影去除测试</title>
<style>
input {
box-shadow: none;
outline: none;
width: 200px;
height: 30px;
padding: 0 10px;
border: 1px solid #ccc;
}
input:focus {
border-color: #409eff;
}
</style>
</head>
<body>
<input type="text" placeholder="请输入内容">
</body>
</html>
运行上述代码后，点击输入框聚焦时就不会出现默认的阴影和轮廓效果，只会显示我们自定义的底部边框颜色变化。
CSSinput输入框box-shadowoutline样式重置修改时间：2026-06-15 07:03:25