Animated Material Input in Pure CSS by ALGOPOINT

Material Input in Pure CSS.css

.input-wrapper {
  --padding: 16px;
  --focus-color: black;
  position: relative;
  display: flex;
  align-items: center;
}

input {
  padding: var(--padding);
  border: 2px solid gray;
  outline: none;
  border-radius: 6px;
}
.placeholder {
  position: absolute;
  background-color: white;
  color: gray;
  left: var(--padding);
  padding: 0 4px;
  transition: all 0.2s ease-in;
}

input:is(:focus, :valid) {
  border: 2px solid var(--focus-color);
}

input:is(:focus, :valid) + .placeholder {
  transform: translatey(calc(-1 * var(--padding) - 12px));
  font-size: 14px;
  color: var(--focus-color);
}

Material Input in Pure CSS.html

    
    <div class="input-wrapper">
      <input type='text' id='input' required ></input>
      <label 
             for='input' 
             class='placeholder'>
        Username
      </label>
    </div>