如何使用CSS隐藏文本输入框的聚焦状态边框

你碰到的其实是浏览器给获得焦点的输入框添加的默认轮廓线（outline），不是你设置的border。要隐藏它很简单，给输入框的:focus状态添加样式覆盖默认行为即可：

修改后的CSS代码 #

.loginbox {
  width: 300px;
  height: 260px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgb(0 0 0 / 10%), 0 8px 16px rgb(0 0 0 / 10%);
  box-sizing: border-box;
  padding: 10px;
}

.input-text {
  width: 95%;
  height: 95%;
  border: none;
  font-size: 90%;
  display: block;
  /* 核心：移除聚焦时的默认轮廓线 */
  outline: none;
}

/* 可选优化：自定义聚焦状态提示，提升可访问性 */
.input-text-border:focus-within {
  border-color: #1877f2;
  box-shadow: 0 0 0 2px rgba(24, 119, 242, 0.2);
}

.input-text::placeholder {
  color: #b7b7b7;
  font-family: SFProDisplay-Regular, Helvetica, Arial, sans-serif;
}

.input-text-border {
  border: 1px solid #afafaf;
  padding: 5px;
  width: 90%;
  height: 10%;
  background-color: #ffffff;
  border-radius: 6px;
}

说明 #

1. 关键操作是给.input-text添加outline: none;，直接取消浏览器默认的聚焦轮廓线，避免破坏自定义样式。
2. 额外建议：完全移除轮廓线可能会影响键盘导航用户的可访问性，所以可以给外层容器.input-text-border加focus-within状态样式，通过改变边框颜色、添加阴影的方式，让用户清晰感知输入框处于激活状态。

完整HTML代码（无需修改） #

<div class="loginbox">
  <div class="input-text-border">
    <input type="text" class="input-text" placeholder="Email or phone number">
  </div>
</div>

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