焦点/主动输入的大纲问题

Question

我有一个关于登录表单中输入的大纲效果的问题：

我尝试做一个 icloud 克隆，当输入处于活动状态并聚焦时，我喜欢蓝色的轮廓效果。 我也不希望在操作输入时因边框而产生任何影响，所以我设置了

border: none;

.

我遇到的问题是，当我使用简单的 CSS 实现效果时，第二个输入（密码）悬停在第一个（电子邮件）的轮廓上。我试着玩 margin 和 padding 但我没有成功解决它......

.email-input,
.pass-input {
  width: 20rem;
  height: 24px;
  border-radius: 0.3rem;
  font-size: 17px;
  font-weight: 200;
  margin: auto;
  padding: 0.5rem;
  outline: 1px solid rgb(155, 154, 154);
  border: none;
  position: relative;
  display: flex;
  justify-content: center;
}

.email-input:active,
.email-input:focus {
  border: none;
  outline: 2px solid #0070c9;
}

.pass-input:active,
.pass-input:focus {
  border: none;
  outline: 2px solid #0070c9;
}

.email-input {
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}

.pass-input {
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
}

<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">
      <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>
  </form>
</div>

还有一些截图：

用于第二个输入

试过：

• 两个输入的顶部和底部边距，但我不喜欢这个结果。我想要两者之间的无缝连接。
• 顶部边框：无； //对于传递输入

我认为理想的解决方案是像 outline-top:none;对于第二个输入。但是我不知道，也没有找到。

Answer 1

您的问题与第二个输入在第一个输入上方呈现有关，因此第一个输入的轮廓在第二个输入下方呈现。

要解决此问题，请为输入分配默认的

z-index

值，并在聚焦时将聚焦元素的

z-index

设置为比其他元素更高的值，以便在上方呈现。

这里有一个例子：https://jsfiddle.net/tLo1w0f4/2/

（我还在您的样式中添加了

outline-offset

，以确保在切换输入时轮廓不会移动。您稍后可能需要它）