How to stop a label from moving back input field?-CodePudding

I currently have a input field that lets you type your Full name. I also have a label that moves to the top once you click into the input field. However, once you type something in the input field, the label moves back to the same spot and overlaps the text.

Is there a way to make it so that the label will stay at the top if there is text in the input field? My code is below.

Contact.jsx:

<form id='contact-form'>
   <input className='contact-form-input' id='contact-full-name' placeholder='Full Name' type='text' name='name' required/>
   <label for='name' className='contact-form-label'>Full Name</label>
</form>

CSS:

#contact-form{
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
}

.contact-form-input{
    width: 100%;
    padding: 4px;
    font-size: 24px;
    font-family: 'Times New Roman', Times, serif;
    border: 0;
    outline: 0;
    border-bottom: 2px solid #000;
    background: transparent;
    z-index: 1;
}
.contact-form-label{
    position: absolute;
    display: block;
    top: 5px;
    left: 4px;
    font-size: 20px;
    transition: .2s;
    z-index: 0;
}
#contact-full-name::placeholder{
    opacity: 1;
    color: transparent;
    font-family: 'Times New Roman', Times, serif;
    font-size: 20px;
}

.contact-form-input:focus{
    color: brown;
    padding-bottom: 6px;
}
.contact-form-input:focus   .contact-form-label{
    color: red;
    position: absolute;
    top: -10px;
    display: block;
    font-size: 15px;
    transition: .2s;
}

CodePudding user response：

After a bit of research I found the pseudo class of :valid.

When using .contact-form-input:valid .contact-form-label I am able to modify the label state after text is in the input field.

CodePudding user response：

Since you already used required on your input field, the easiest way to style the corresponding label via a css selector so that it will get styled as red on top like when the input field has focus, is by adding the following selector to that same rule:

#contact-full-name:valid label

https://developer.mozilla.org/en-US/docs/Web/CSS/:valid

#contact-form{
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
}

.contact-form-input{
    width: 100%;
    padding: 4px;
    font-size: 24px;
    font-family: 'Times New Roman', Times, serif;
    border: 0;
    outline: 0;
    border-bottom: 2px solid #000;
    background: transparent;
    z-index: 1;
}
.contact-form-label{
    position: absolute;
    display: block;
    top: 5px;
    left: 4px;
    font-size: 20px;
    transition: .2s;
    z-index: 0;
}
#contact-full-name::placeholder{
    opacity: 1;
    color: transparent;
    font-family: 'Times New Roman', Times, serif;
    font-size: 20px;
}

.contact-form-input:focus{
    color: brown;
    padding-bottom: 6px;
}

#contact-full-name:valid   label,
.contact-form-input:focus   .contact-form-label{
    color: red;
    position: absolute;
    top: -10px;
    display: block;
    font-size: 15px;
    transition: .2s;
}

<form id='contact-form'>
   <input class='contact-form-input' id='contact-full-name' placeholder='Full Name' type='text' name='name' required/>
   <label for='name' class='contact-form-label'>Full Name</label>
</form>