1

Такая дилемма. Есть input. Placeholder реализован через ::before для контейнера, в котором находится сам input и собственно placeholder в виде span. При заполнении анимация отрабатывает и Placeholder смещается как надо. Реализовано через focus для Input. Но когда input не в фокусе - placeholder возвращается на прежнее место и перекрывает Input.

Как зафиксировать/запретить возвращаться Placeholder в свое прежнее состояние, если input заполнен?

Спасибо.

<div class="form__inputs inputs">
                  <div class="inputs__item">
                     <input class="form__input" type="text" name="name">
                     <span class="inputs__placeholder">Ваше имя*</span>
                  </div>
                  <div class="inputs__item">
                     <input class="form__input" type="tel" name="phone">
                     <span class="inputs__placeholder">Номер телефона*</span>
                  </div>
                  <div class="inputs__item">
                     <input class="form__input" type="text" name="comment">
                     <span class="inputs__placeholder">Комментарий</span>
                  </div>
               </div>
.inputs {

   &__item {
      position: relative;
      flex: 1 1 370px;
   }

   &__placeholder {
      position: absolute;
      bottom: 12px;
      left: 5px;
      font-size: 16px;
      line-height: 138%;
      user-select: none;
      transition: font-size .2s, line-height .2s, color .2s, transform .2s;
   }
}
.form {

   &__input:focus+.inputs__placeholder {
      font-size: 11px;
      line-height: 136%;
      color: #979086;
      transform: translateY(-22px);
   }}

1 ответ 1

1

Добавьте полям ввода атрибут placeholder с пробелом в качестве значения. А для проверки на заполнение поля используйте связку псевдоклассов :not() и :placeholder-shown.

.inputs__item {
  position: relative;
  flex: 1 1 370px;
}

.inputs__placeholder {
  position: absolute;
  bottom: 12px;
  left: 5px;
  font-size: 16px;
  line-height: 138%;
  user-select: none;
  transition: font-size 0.2s, line-height 0.2s, color 0.2s, transform 0.2s;
}

.form__input:focus + .inputs__placeholder,
.form__input:not(:placeholder-shown) + .inputs__placeholder {
  font-size: 11px;
  line-height: 136%;
  color: #979086;
  transform: translateY(-22px);
}
<div class="form__inputs inputs">
  <div class="inputs__item">
    <input class="form__input" type="text" name="name" placeholder=" ">
    <span class="inputs__placeholder">Ваше имя*</span>
  </div>
  <div class="inputs__item">
    <input class="form__input" type="tel" name="phone" placeholder=" ">
    <span class="inputs__placeholder">Номер телефона*</span>
  </div>
  <div class="inputs__item">
    <input class="form__input" type="text" name="comment" placeholder=" ">
    <span class="inputs__placeholder">Комментарий</span>
  </div>
</div>

7
  • вы бы не могли подробнее объяснить? Не могу понять как это использовать.
    – El Jeko
    Commented 5 янв. 2023 в 13:59
  • @ElJeko, код смотрели? Запускали? Нашли информацию про указанные псевдоклассы?
    – UModeL
    Commented 5 янв. 2023 в 14:02
  • Не могу разобраться как это применять
    – El Jeko
    Commented 5 янв. 2023 в 14:11
  • 1
    Всё сработало. Спасибо за помощь!
    – El Jeko
    Commented 5 янв. 2023 в 14:17
  • @UModeL можно к .inputs__placeholder применить pointer-events: none;, чтобы можно было через них нажимать.
    – ΝNL993
    Commented 5 янв. 2023 в 14:25

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.