Как сделать, чтобы label имитирующий placeholder работал без использования required?

Question

[SeriousAnonymous]

В данном коде все работает, как нужно.
Вопрос заключается в том, как реализовать тот же эффект, но без использования required в input, так как поле не обязательное для заполнения?

<div class="e-mail__inner">
                                    <div class="order__form-title">
                                        Электронная почта
                                    </div>
                                    <div class="order__form-text">
                                        Необязательно, но увеличит вероятность одобрения на 16%
                                    </div>
                                    <div class="order__form-block">
                                        <input type="text" required>
                                        <label for="">Эл. почта</label>
                                        <span class="bonus-percent">
                                        +20 %
                                    </span>
                                    </div>
                                </div>

.order__form-block{
  position: relative;
  width: 100%;
}

.order__form-block label{
  position: absolute;
  left: 16px;
  top: 17.5px;
  font-size: 16px;
  line-height: 19px;
  letter-spacing: 0.01em;
  color: #696C70;
  transition: top 0.2s linear ;
  pointer-events: none;
  @include ROB400;
}

.bonus-percent{
  background: #50CA6D;
  border-radius: 100px;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: #FFFFFF;
  padding: 4px 8px;
  position: absolute;
  @include ROB400;
  top: 16px;
  right: 16px;
}

.order__form-block input{
  width: 100%;
  outline: none;
  height: 54px;
  padding: 16px;
  background: #ECF1F7;
  border: transparent;
  border-radius: 2px;
}

.order__form-block input{
  padding-bottom: 9px;
  padding-right: 70px;
  font-size: 16px;
  line-height: 19px;
  letter-spacing: 0.01em;
  @include ROB400;
}


.order__form-block input:focus~label,
.order__form-block input:not(:focus):valid~label {
  top: 9px;
  font-size: 10px;
  line-height: 12px;
  letter-spacing: 0.005em;
}

Answer 1

[0xD34F]

Заменить :valid на :not(:placeholder-shown).

Самому элементу, соответственно, добавить непустой атрибут placeholder. Поскольку реально он не нужен, то пусть это будет пробел - чтобы было не видно.