Interaktywna Etykieta Formularza

CSS

<div class="input-container">
  <input type="text" id="name" name="name" placeholder="Wpisz swoje imię">
  <lable for="name" class="placeholder-label">Wpisz swoje imię</label>
</div>

HTML

body {
  display: flex;
  justify-content: center; /* Wyśrodkowanie poziome */
  align-items: center; /* Wyśrodkowanie pionowe */
  height: 100vh; /* Ustawiamy wysokość całego widoku przeglądarki */
  margin: 0; /* Usuwamy marginesy */
}

.input-container{
  position: relative;
  display:inline-block;
  width:200px;
}

input{
  width:100%;
  padding: 13px;
  border: 2px solid #262626;
  border-radius: 10px;
  font-size:14px;
  outline: none;
  position: relative;
}


input:focus{
  border-color:#00add9;
}

.placeholder-label{
  position: absolute;
  font-family:montserrat;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  background:white;
  padding: 0px 5px;
  color: #262626;
  font-size:16px;
  transition: all 0.3s ease;
  pointer-events: none;
}



input:focus + .placeholder-label,
input:not(:placeholder-shown) + .placeholder-label 
 {
  top: -3px;
  font-size:14px;
  color:#00add9;
}

input::placeholder{
  color:transparent;
  
}


.input-container{
  position: relative;
  width:200px;
}