CSS email input :valid placeholder issue

Issue

I am making a login page with email and password input boxes. I have added a placeholder using a span element. When the input box is clicked it will move the placeholder to the top of the input box and make the font-size a lot smaller. The placeholder stays in this position if the input box is still focused or if text is entered into the input.

This works perfectly for text inputs and the password input because it detects that the inputs are valid when they contain text, but it doesn't work for email input until you type in a email that is the correct format. So for example, if you just type 'test' into the email box it not see this as valid and the placeholder text will go back to its original position and overlap the text.

Can anyone help me with this please?

<form name="login" action="" method="post"><input type="hidden" name="formid" value="4f5e2c860e789bc1df1ea953c167d39e">            
    <!-- Email -->
    <div class="input-box login-input">
        <input type="email" name="email_address" class="text-input" autocomplete="email" autocorrect="off" autocapitalize="off" spellcheck="false" required="">                
        <span class="input-placeholder">Email</span>
    </div>
    <!-- Password -->
    <div class="input-box login-input">
        <input type="password" name="keywords" maxlength="40" class="text-input" autocomplete="current-password" autocorrect="off" autocapitalize="off" spellcheck="false" required="">                
        <span class="input-placeholder">Password</span>
    </div>
    <button type="submit" name="login" class="page-control-btn red-btn">Sign In</button>
</form>

CSS:

.login-input {
    padding: 0;
}
.login-input .text-input {
    width: 100%;
    letter-spacing: normal;
    padding-left: 20px;
    position: relative;
}
/*NB search input palceholder */
.input-placeholder {
    position: absolute;
    font-size: 16px;
    color: rgb(255, 255, 255, 0.7);
    left: 19px;
    top: 10px;
    letter-spacing: 0.1rem;
    text-transform: capitalize;
    pointer-events: none;
    transition: 0.2s ease all;
}
.login-input .text-input,
.login-input .input-placeholder {
    color: #595959 !important;
}
.login-input .text-input:focus ~ .input-placeholder,
.login-input .text-input:not(:focus) ~ .input-placeholder {
    color: rgb(0, 0, 0, 0.8) !important;
}
.login-input .text-input:focus ~ .input-placeholder,
.login-input .text-input:not(:focus):valid ~ .input-placeholder {
    top: 4px;
    bottom: 10px;
    left: 19px;
    font-size: 9px;
    opacity: 1;
    letter-spacing: normal;
}

Solution

Instead of .text-input:not(:focus):valid use .text-input:not(:placeholder-shown).

Use :placeholder-shown pseudo class to detect if the input contains text or has value without checking its validity. Though this requires a placeholder attribute on the inputs with a single space value.

.login-input {
    padding: 0;
}
.login-input .text-input {
    width: 100%;
    letter-spacing: normal;
    padding-left: 20px;
    position: relative;
}
/*NB search input palceholder */
.input-placeholder {
    position: absolute;
    font-size: 16px;
    color: rgb(255, 255, 255, 0.7);
    left: 19px;
    top: 10px;
    letter-spacing: 0.1rem;
    text-transform: capitalize;
    pointer-events: none;
    transition: 0.2s ease all;
}
.login-input .text-input,
.login-input .input-placeholder {
    color: #595959 !important;
}
.login-input .text-input:focus ~ .input-placeholder,
.login-input .text-input:not(:focus) ~ .input-placeholder {
    color: rgb(0, 0, 0, 0.8) !important;
}

/*edited*/
.login-input .text-input:focus ~ .input-placeholder,
.login-input .text-input:not(:placeholder-shown) ~ .input-placeholder {
    top: 4px;
    bottom: 10px;
    left: 19px;
    font-size: 9px;
    opacity: 1;
    letter-spacing: normal;
}

<form name="login" action="" method="post"><input type="hidden" name="formid" value="4f5e2c860e789bc1df1ea953c167d39e">            
    <!-- Email -->
    <div class="input-box login-input">
        <!--inserted placeholder=" " -->    
        <input type="email" name="email_address" class="text-input" autocomplete="email" autocorrect="off" autocapitalize="off" spellcheck="false" required="" placeholder=" ">                
        <span class="input-placeholder">Email</span>
    </div>
    <!-- Password -->
    <div class="input-box login-input">
        <!--inserted placeholder=" " -->
        <input type="password" name="keywords" maxlength="40" class="text-input" autocomplete="current-password" autocorrect="off" autocapitalize="off" spellcheck="false" required="" placeholder=" ">                
        <span class="input-placeholder">Password</span>
    </div>
    <button type="submit" name="login" class="page-control-btn red-btn">Sign In</button>
</form>

Note: These particular custom placeholders will not go back into their original places if the value of the input fields contain only spaces / blank character. So look after that.

Answered By - jade