Такая дилемма. Есть 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);
}}