如何仅保留输入框聚焦时的底部outline（焦点边框）？

首先明确：CSS 原生的 outline 属性不支持单独拆分设置上、右、左、下四个方向的样式，它是作用于元素整个外围的统一轮廓，无法单独保留某一边。
你可以通过以下两种成熟方案实现需求： #

方案1：用 border 实现（最常用） #

直接关闭默认outline，移除其他三边边框，仅保留底部边框即可：

<input style="outline: none; border: none; border-bottom: 1px solid #333;" placeholder="输入内容">

如果需要聚焦状态有交互反馈，可以补充伪类样式：

/* 非聚焦状态 */
input {
  outline: none;
  border: none;
  border-bottom: 1px solid #ccc;
  padding: 4px 2px;
}
/* 聚焦状态 */
input:focus {
  border-bottom-color: #1677ff; /* 聚焦时修改底部线条颜色提示用户 */
}

方案2：用 box-shadow 实现（不占用盒模型空间） #

如果你需要类似outline不占用布局空间、不会改变元素尺寸的特性，可以用无模糊的下阴影模拟底部线条：

<input style="outline: none; border: none; box-shadow: 0 1px 0 #333;" placeholder="输入内容">

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