去边框需同时设 border: none 和 outline: none（后者须配合 :focus），并提供替代焦点反馈（如 box-shadow）；保留 border-bottom 是常用折中方案；禁用全局 * { border: none }，应限定作用域。

input 去边框必须同时处理 border 和 outline

只写 border: none 或只写 outline: none 都不完整，浏览器默认会同时渲染两者：border 是元素自身的边框，outline 是聚焦（focus）时的辅助轮廓。漏掉任意一个，都会在点击或 Tab 切换时突然冒出蓝色/黑色边框，尤其 Chrome/Firefox 对 input:focus 的 outline 有强默认样式。

• border: none 移除物理边框（含所有四边），语义清晰，推荐优先使用；border: 0 虽视觉等效，但在旧 Safari 或打印样式中可能残留盒模型影响
• outline: none 必须配合 :focus 伪类使用，单独写在全局 input { outline: none } 会禁用所有焦点提示，损害可访问性
• 若用 appearance: none（尤其针对 Safari/Chrome 的原生 input 样式），建议一并加上，避免系统控件自带边框干扰

去掉边框后焦点状态必须提供替代反馈

移除 outline 后，键盘用户无法感知当前聚焦位置，这违反 WCAG 2.1 AA 级可访问性要求。不能简单“删了就完事”，得用其他视觉方式补上焦点指示。

• 用 box-shadow 替代 outline：例如 input:focus { box-shadow: 0 0 0 2px rgba(0, 123, 191, 0.25); }，比 outline 更可控、不偏移布局
• 慎用 outline-offset：设为负值可能裁剪阴影，正值又拉远距离，不如直接用 box-shadow + outline: none 组合更稳定
• 鼠标悬停态别只改 background-color——加 transform: scale(1.02) 或轻微 box-shadow，能强化交互意图

border-bottom 单线样式是无边框输入框最常用方案

纯无边框易导致输入框“消失”在页面中，尤其浅色背景上。保留底部一条细线（border-bottom）是兼顾扁平化与可用性的折中解法，但要注意它和原始 border 的叠加逻辑。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 先重置完整边框：border: none，再单独声明 border-bottom: 1px solid #ccc，避免 border-bottom 被继承的 border-style 干扰
• 若父容器有 border-collapse: collapse（如表格内嵌 input），border-bottom 可能被吞掉，此时改用 box-shadow: inset 0 -1px 0 #ccc 更可靠
• placeholder 文字颜色常被忽略：加 input::placeholder { color: #999; }，否则在无边框下更难辨识输入区

全局重置 * { border: none } 是危险操作

通配符重置看似省事，实际会破坏大量依赖 border 实现基础功能的元素，且难以排查。

• hr、table td、fieldset、自定义下拉箭头（靠 border-top/border-bottom 画三角）全部失效
• 某些图标字体（如 Font Awesome）用 border 控制对齐或伪元素边框，* { border: none } 会导致图标错位或消失
• 真正需要“统一去边框”的场景，应限定作用域，例如 .form-flat input, .form-flat textarea，而非全局污染

真正难的不是写 border: none，而是判断哪些地方该留边、哪些该换反馈、哪些根本不能动。border 和 outline 的职责不同，混着清或漏着清，最后都在 QA 或残障测试阶段暴露。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！