登录表单输入框focus/active状态outline重叠问题求助

问题原因 #

outline是完整的矩形盒模型，不支持单独隐藏某一边，因此两个无缝连接的输入框在focus状态下，各自的蓝色outline会相互重叠，无法通过类似outline-top: none的属性解决。

解决方案：利用父容器统一处理focus状态 #

通过给两个输入框添加父容器，使用:focus-within伪类在输入框focus时给父容器添加蓝色outline，既避免重叠，又保持输入框无缝连接。

步骤1：修改HTML结构

给两个输入框包裹一个父容器.input-container：

<div class="page-1">
  <div class="login-logo">
    <img src="../Assets/login-logo.svg">
  </div>
  <div class="login-title">
    <p class="login-text">
      Se connecter avec un identifiant
    </p>
  </div>
  <form action="#" class="main-form">
    <div class="login-form">
      <!-- 添加父容器 -->
      <div class="input-container">
        <span>
          <input id="username" class="email-input" type="email" placeholder="Identifiant" required="">
        </span>
        <span>
          <input id="password" class="pass-input" type="password" placeholder="Mot de passe" required="">
          <button id="submit" class="fal fa-arrow-circle-right"></button>
        </span>
      </div>
    </div>
  </form>
</div>

步骤2：修改CSS样式

调整输入框和父容器的样式，让父容器承担边框和focus状态的outline：

/* 父容器样式 - 统一处理边框和focus效果 */
.input-container {
  width: 20rem;
  margin: auto;
  border: 1px solid rgb(155, 154, 154);
  border-radius: 0.3rem;
}

/* 输入框通用样式 */
.email-input,
.pass-input {
  width: 100%;
  height: 24px;
  font-size: 17px;
  font-weight: 200;
  padding: 0.5rem;
  border: none;
  outline: none; /* 去掉输入框自身的outline */
  background: transparent;
}

/* 邮箱输入框：添加底部分隔线，调整圆角 */
.email-input {
  border-bottom: 1px solid rgb(155, 154, 154);
  border-radius: 0.3rem 0.3rem 0 0;
}

/* 密码输入框：调整圆角 */
.pass-input {
  border-radius: 0 0 0.3rem 0.3rem;
}

/* 父容器在内部输入框focus时显示蓝色outline */
.input-container:focus-within {
  outline: 2px solid #0070c9;
}

效果说明 #

• 默认状态下，父容器显示灰色边框，两个输入框通过内部分隔线保持无缝连接；
• 任意输入框focus时，父容器整体显示蓝色outline，完全不会出现重叠问题；
• 保留了你原本的输入框样式和交互逻辑，仅通过父容器优化了focus状态的显示。

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