Стилизация тектовых полей INPUT

<style>
    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
      font-size: 1rem;
      font-weight: 400;
      line-height: 1.5;
      color: #212529;
      background-color: #fff;
      -webkit-text-size-adjust: 100%;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }

    h1 {
      font-size: 1.25rem;
      font-weight: 500;
    }

    p {
      font-weight: 500;
    }

    /* text-field */
    .text-field {
      margin-bottom: 1rem;
    }

    .text-field__label {
      display: block;
      margin-bottom: 0.25rem;
    }

    .text-field__input {
      display: block;
      width: 100%;
      height: calc(2.25rem + 2px);
      padding: 0.375rem 0.75rem;
      font-family: inherit;
      font-size: 1rem;
      font-weight: 400;
      line-height: 1.5;
      color: #212529;
      background-color: #fff;
      background-clip: padding-box;
      border: 1px solid #bdbdbd;
      border-radius: 0.25rem;
      transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }

    .text-field__input::placeholder {
      color: green;
      opacity: 0.4;
    }

    .text-field__input:focus {
      color: red;
      background-color: #fff;
      border-color: #bdbdbd;
      outline: 0;
      box-shadow: 0 0 0 0.2rem rgba(158, 158, 158, 0.25);
    }

    .text-field__input:disabled,
    .text-field__input[readonly] {
      background-color: #f5f5f5;
      opacity: 1;
    }
  </style>

<div style="max-width: 500px; margin-left: auto; margin-right: auto; padding: 15px;">

    <h1>Базовое оформление текстового поля &lt;input&gt;</h1>
    <p>1 вариант</p>
    <div class="text-field">
      <label class="text-field__label" for="login">Логин</label>
      <input class="text-field__input" type="text" name="login" id="login" placeholder="Login" value="itchief">
    </div>
    <p>2. Без value</p>
    <div class="text-field">
      <label class="text-field__label" for="username">Логин</label>
      <input class="text-field__input" type="text" name="username" id="username" placeholder="Username">
    </div>
    <p>3. В состоянии фокуса</p>
    <div class="text-field">
      <label class="text-field__label" for="email">Email</label>
      <input class="text-field__input" type="text" name="email" id="email" placeholder="Email" value="Адрес электронной почты защищен от спам-ботов. Для просмотра адреса в браузере должен быть включен Javascript.">
    </div>
    <p>4. В состоянии disabled и readonly</p>
    <div class="text-field">
      <label class="text-field__label" for="firstname">Имя пользователя (disabled)</label>
      <input class="text-field__input" type="text" name="firstname" id="firstname" placeholder="Alaxander" disabled>
    </div>
    <div class="text-field">
      <label class="text-field__label" for="city">Город (readonly)</label>
      <input class="text-field__input" type="text" name="city" id="city" placeholder="Moscow" value="Moscow" readonly>
    </div>
    <div class="text-field">
      <label class="text-field__label" for="lastname">Фамилия пользователя (disabled и readonly)</label>
      <input class="text-field__input" type="text" name="lastname" id="lastname" placeholder="Last Name" value="Maltsev" disabled readonly>
    </div>

  </div>

  <script>
    document.querySelector('#email').focus();
  </script>