Почему псевдокласс invalid изменяет состояние input по дефолту?

Question

[Rimidbit]

Не пойму как на сss сделать, чтобы после нажатия кнопки подсвечивалось поле с ошибкой

<form
                action="#"
                class="form"
              >
                <p class="form__title">
                  Message us
                </p>
                <label class="form__item">
                  <input
                    name="name"
                    type="text"
                    placeholder="Name"
                    class="form__input"
                  >
                </label>
                <label class="form__item">
                  <input
                    name="email"
                    type="email"
                    placeholder="Email"
                    class="form__input"
                    required
                  >
                </label>
                <label class="form__item">
                  <textarea
                    name="message"
                    id="message"
                    placeholder="Message"
                    class="form__texterea"
                  ></textarea>
                </label>
                <button class="form__button button" type="submit">
                  Submit
                </button>
              </form>

&__input {
    @include stylesText;
    background-color: transparent;
    padding: 4px;
    width: 100%;
    border: 1px solid transparent;
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 10px 5px rgba(3, 131, 158, 0);
    transition: all 0.3s;
    cursor: pointer;

    &:invalid {
      border-bottom: 1px solid #eb5757;
    }

    &:invalid::placeholder {
      color: #eb5757;
    }

    &:hover {
      outline: 0;
      border-bottom: 1px solid $colorGray;
    }

    &:focus {
      outline: 0;
      box-shadow: 0 0 10px 5px rgba(3, 131, 158, 0.2);
    }
  }

что не так? я понимаю, что подсвечивается пункт, обязательный к заполнению, но как сделать чтобы до заполнения был дефолтный цвет?

Comments

[imko]

У полей своя жизнь и кнопки своя, они не ждут ее нажатия чтобы решить соответствуют ли они требованиям валидации, как в ответе написали можешь использовать placeholder-shown чтбы определять только неверно заполненные поля а не в принципе незаполненные

[Ankhena]

На будущее :user-invalid

Answer 1

[Rsa97]

У вас стоит required, соответственно незаполненное поле имеет статус invalid. Для определения непустого поля можно использовать &:not(:placeholder-shown):invalid