蓝色外框是浏览器默认 outline 而非 border，需显式设置 outline: none 或重定义其样式；仅改 border-color 无效，推荐 input:focus { border-color: #007bff; box-shadow: 0 0 0 2px rgba(0,123,255,0.25); }。
input:focus 为什么改了 border-color 还有蓝色外框
因为那个“蓝色外框”根本不是 border，而是浏览器默认的 outline。它独立于边框存在，位于 border 外侧，且不参与布局计算。只改 border-color 不生效，是因为 outline 没被处理，两个视觉层叠在一起了。
常见错误现象包括：写 input:focus { border: 1px solid #007bff; } 后仍看到原生蓝色环；或用 !important 强行覆盖也无效——大概率是框架（如 Bootstrap、Element Plus）已用 outline: none !important 锁死，但没补视觉反馈，导致你加的 border 被忽略或错位。
- 必须显式控制
outline：要么设为none，要么重定义它的样式 -
border要先有基础定义（比如border: 1px solid #ddd;），否则只写border-color不会显示 - 移动端 Safari 默认禁用非可点击型
input的:focus渲染，需确保input类型合法（如type="text"）且未被pointer-events: none阻断
如何正确写出 focus 状态下的边框效果
最稳妥的做法是「清 outline + 显式定义 border」，而不是依赖 outline 模拟边框。这样可控性强、兼容性好、语义清晰。
推荐写法：
input {
border: 1px solid #ccc;
outline: none;
}
input:focus {
border-color: #007bff;
box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}
说明：
-
outline: none必须写在常态或:focus中，不能只靠继承；若框架已设outline: none !important，你再写一遍无害，但要确认是否覆盖成功（用开发者工具 Elements 面板勾选:focus查看） -
box-shadow是比单纯加粗border更安全的视觉反馈方式：它不改变元素尺寸，避免布局抖动，且能自然适配border-radius - 如果必须用
outline（比如要保留键盘导航焦点环），请搭配outline-offset避免与border紧贴：例如outline: 2px solid #007bff; outline-offset: 2px;
Element Plus 的 el-input 和原生 input 边框不一致怎么办
根本原因是 <el-input></el-input> 内部封装了 <input>，但它的聚焦样式由组件 CSS 控制，而你直接写的 input:focus 选择器权重不够，或者被 scoped 样式隔离了。
实操建议：
- 不要试图用
input:focus覆盖el-input，应使用其提供的类名或属性：比如针对el-input添加 classmy-input，然后写.my-input.is-focus .el-input__inner:focus - 若想全局统一，可在项目入口 CSS 中提高权重：
input.my-custom:focus, .el-input__inner.my-custom:focus，并确保该样式加载顺序在 Element 样式之后 - 注意 Vue 3 的
<style scoped></style>下，需用::v-deep()或:deep()穿透（如:deep(.el-input__inner:focus)）才能影响子组件内部元素
移动端 focus 样式失效或延迟触发
iOS Safari 和部分安卓 WebView 对 :focus 的触发非常保守：点击后可能不立即渲染，或仅对 input[type="text"]、textarea 等可编辑元素生效，button 或自定义控件常被忽略。
关键应对点：
- 确保
input有tabindex="0"（尤其当它是动态生成或 disabled 后又启用时） - 避免用
user-select: none或pointer-events: none在父容器上误伤焦点行为 - 不要依赖纯 CSS 的
:focus做关键交互反馈；必要时监听focusin/focusout事件，用 JS 切换 class（如is-focused）来兜底 - 测试真机，模拟器往往不还原 Safari 的 focus 行为
最易被忽略的是：outline 的可访问性意义。去掉它不难，但不提供替代视觉反馈（比如 box-shadow 或背景色变化），会让键盘用户完全失去当前焦点位置感知——这不是样式问题，是合规风险。
