[SOLVED] outline issue for focus/active inputs

outline issue for focus/active inputs

I have an issue concerning an outline effect for inputs in a log in form :

I try to do an icloud clone and I like the outline effect in blue when inputs are actives and focus. I also don't want any effect due to borders when manipulating inputs so I set border: none;.

The issue I'm having is when I did the effect with simple CSS, the second input (password) hover the outline of the first (email). I tried to play with margin and padding but I didn't succeed to resolve it...

.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>

And some screenshots :

The issue

The wished result for the second input

Tried :

margin top and bottom for both inputs, but I don't like the result. I would like a seamless connexion between both.
border-top:none; //for the pass-input

I think the ideal would be to have a solution for like an outline-top:none; for the second input. But I didn't know it and didn't find it.

Solution

Your issue is related the the second input being rendered above the first, so the first input's outline is rendered under the second input.

To fix this, assign a default z-index value to the inputs, and when focused, set the focused element's z-index to a higher value than that of the other element so it's rendered above.

Here's an example: https://jsfiddle.net/tLo1w0f4/2/

(I also added outline-offset to your styling to make sure the outline doesn't move when switching inputs. You would probably need this later)