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 try to play with margin and padding but i don’t succeded to resolve it…

HTML file :

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

CSS file :

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

And some screenshots :
enter image description here
The issue

enter image description here
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.

(sorry for my newbinness)

I Thank you all for the time you will take for me !
Mad,

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