How to remove the label when user typed in their input?-CodePudding

I would like to ask for help on how I can remove the label when the user has typed in their input. When I tested my code, the label overlaps the input that was typed by the user, and that is not what I wanted to happen. I am assuming I'll have to use JavaScript, an event listener? but I am new to coding, the code structure and syntax is really new and what I can only understand are basic logic from how I read codes in html. Would really appreciate the help!

Here is my code

.centered-container-form {
  padding-bottom: 25%;
  font-size: 18px;
  display: flex;
  flex-direction: column;
  width: 300px;

}

.form-container {
  width: 100%;
}

.container{
  position: relative;
  max-width:245px;
  width: 100%;
  border-radius:6px;
  background-color: #fff;
}

.container .input-box{
  position:relative;
  height: 50px;
  background-color: red;

}

.input-box input{
  position:absolute;
  outline:none;
  height:100%;
  width:100%;
  border: 2px solid #ccc;
  padding: 0 35px 0 15px;
  transition: all 0.2s linear;
  border-radius:6px;
}

.input-box :is(label, img){
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  color:#999;
  transition: all 0.2s linear;
}

.input-box label{
  left: 15px ;
  pointer-events: none;
  font-size: 16px;
  font-weight:400;
  padding:0px 5px; 
}
.input-box img {
  right:15px;
  height: 20px;
}

input:is(:focus) ~ img{
  color:#0890EB;
}

input:is(:focus) ~ label{
  color:#0890EB;
  background-color: #fff;
  top:0;
  padding:0px 5px; 
  font-size: 12px;

}

input:is(:focus){
  border-color: #0890EB;

<div  className="centered-container-form">  
  <form onSubmit={handleSubmit}>
    <div className='form-container'>     
  <div className='container'>
          <div className='input-box'>
          <input type="email" value={email} onChange= 
   {handleEmailChange} />
          <label>
          Email/username
          </label>
        </div>
        </div>
        <br></br>
     
<div className="container">
        <div className='input-box'>
          <input
            type="password"
            value={password}
            onChange={handlePasswordChange}
         />  
          <label>
          Password </label>
        </div> 
        </div>
    </div>
  </div>
      </form>

CodePudding user response：

Try adding placeholder to both your inputs and then add this snippet to your css

HTML:

<div className='container'>
          <div className='input-box'>
          <input placeholder="email" type="email" value={email} onCh} />
          <label>
          Email/username
          </label>
        </div>
        </div>
        <br></br>
     
<div className="container">
        <div className='input-box'>
          <input
          placeholder="password"
            type="password"
            value={password}
            onChange={handlePasswordChange}
         />  
          <label>
          Password </label>
        </div> 
        </div>

Css:

input:not(:placeholder-shown) ~ label{
  display: none;
}

input:placeholder-shown ~ label{
  display: inline;
}

CodePudding user response：

If i correct understood your question, you dont need labelyou need placeholder

so just replace your input like:

<input type="password" placeholder={password} />

CodePudding user response：

I have solved my problem. Just used placeholder and brought back my initial code and replacing type into text/password. Thank you everyone for answering!