<form>
<div class="input-container">
  <input type="text" placeholder=" " pattern="[a-zA-Z0-9_]{4,8}"/>
  <div class="input-label">Логин (4-8 букв или цифр)</div>
</div>
<br>
<div class="input-container">
  <input type="password" placeholder=" " />
  <div class="input-label">Пароль</div>
</div>
  <br>
  <button type="submit">Ок</button>
</form>

.input-container {
  position: relative;
  display: inline-block;
  padding: 0.2em;
  margin: 0.5em 0;
  border: 1px solid grey;
}

input {
  outline: none !important;
  border: none;
  width: auto;
}

.input-label {
  color: #333;
  font-size: 0.8em;
  position: absolute;
  padding: 0 0.2em;
  top: 0.5em;
  left: 0.3em;
  pointer-events: none !important;
  background-color: white;
  transform: translateY(-1em) scale(0.85);
  transition: all 0.2s linear 0s;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

input:placeholder-shown:not(:focus-within) + .input-label {
  color: #777;
  transform: translate(0, 0) scale(1);
  max-width: 90%;
}

.input-container:focus-within {
  border: 1px solid blue;
}

.input-container:focus-within .input-label {
  color: blue;
}