e-mail span drops down after entering invalid e-mail address in the ‘contact’ form

How can I make ‘E-mail’ span stay on the top pink

.contactt{
    position: relative;
    padding: 50px 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.container{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.contactFormm{
    width: 40%;
    padding: 40px;
    background: #fff;
}


.contactFormm .inputBox {
    position: relative;
    width: 100%;
    margin-top: 10px;
}

.contactFormm .inputBox input,
.contactFormm .inputBox textarea{
    width: 100%;
    padding: 5px 0;
    font-size: 16px;
    margin: 10px 0px;
    border: none;
    border-bottom: 2px solid #333;
    outline: none;
    resize: none;
}

.contactFormm .inputBox span{
    left: 0;
    position: absolute;
    padding: 5px 0;
    font-size: 16px;
    margin: 10px 0px;
    pointer-events: none;
    transition: 0.5s;
    color: #666;
}

.contactFormm .inputBox input:focus ~ span,
.contactFormm .inputBox input:valid ~ span,
.contactFormm .inputBox textarea:focus ~ span,
.contactFormm .inputBox textarea:valid ~ span{
    color: #e91e63;
    font-size: 12px;
    transform: translateY(-20px);
}

<main class='contactt container'>
        <div class='contactFormm'>
        <form>
            <h1>Contact form</h1>
            <div class='inputBox'>
                <input type="email" name='' required='required'>
                <span>E-mail</span>
            </div>
            <div class='inputBox'>
                <input type="text" name='' required='required'>
                    <span>Name</span>
            </div>
            <div class='inputBox'>
                <input type="text" name='' required='required'>
                <span>Subject</span>
            </div>
            <div class='inputBox'>
                <textarea required='required'></textarea>
                <span>Type your Message...</span>
            </div>
            <div class='inputBox'>
                <input type='submit' name='' value='Send'>
            </div>
        </form>
             

        </div>
  
    </main>

? Is there anything else I can use instead of ‘valid’? I know that ‘E-mail” span drops down because it is not valid e-mail but even if someone writes invalid e-mail I want it to be still pink on the top but in the same time, when I press ‘send’ button I want the chrome say that it is not valid. Please see my code so maybe you could

When I write ‘dhdhd’ <- invalid e-mail and go to the next box, the pink ‘E-mail’ span drops down and becomes grey. It will only work if I write valid e-mail e.g ‘dfghj@gmail.com’ but I still want this ‘e-mail’ span to stay on the top even if it is invalid

Answer

You could just use the :invalid pseudo-class which would work, although I think it would display it as pink all the time. I don’t think you can achieve your desired outcome without using JavaScript unless you target input[value=""] (i.e. empty input).

Just a quick note that you should use a proper <label> element and associate it to the field for accessibility.

Advertisement

Answer