CSS анимация label для поля select

Question

Каким образом реализовать по аналогии с input анимацию для select? Код для input работает отлично, label уходит вверх поля и остается там, если поле заполнено и при смене фокуса остается наверху.

<style>
.form-control:focus ~ .form-label,
.form-control:not(:placeholder-shown) ~ .form-label{
    top: -18px;
    font-size: 12px;
}
</style>
<input class="form-control" list="datalistOptionsWaybill" id="waybill" placeholder=" ">
<label for="waybill" class="form-label">Waybill</label>

Как изменить CSS для select? Потому как по аналогии с input он не работает в этом случае

<select id="carsField" class="form-control>
   <option>car</option>
</select>
<label for="carsField" class="form-label">Car</label>

Спасибо

Answer 1

Поскольку вы не представили анимацию, то и работаем с чем есть. Будем их красить.

В вашем случае нет причин использовать в стиле ~. Её задача захватить всех соседей справа. И хотя пока там соседствует лишь одна <label>, но это пока. Потому пишем правильно +;
Не вижу смысла нагружать отрицанием :not(:placeholder-shown), разве что у вас множество разных ситуаций и все их нужно отработать по разному. Ладно, оставим;
Не мешало бы дать этим элементам дополнительные стили, чтобы обращаться индивидуально, не мешая всё в кучу.

/* этот финт работает, если нет атрибута, а не как у вас — есть, но пустой*/
.form-control:not(:placeholder-shown) + .form-label {
  font-size: 16px;
  background-color: grey;
}
.form-control:not(:placeholder-shown):focus + .form-label{
  font-size: 12px;
  background-color: blue;
}

/* можно просто не добавлять атрибут и не нагружать лишнее  */
.form-control + .form-label {
  background-color: #ddb9ff;
  font-size: 16px;
}
.form-control:focus + .form-label{
  font-size: 12px;
  background-color: gold;
}

/* по тому же принципу, что и выше (при фокусе на элементе) нужно захватить соседнюю справа label */
.form-control:not(:placeholder-shown) + .form-label{
  background-color: red;
}
.form-control:not(:placeholder-shown):focus + .form-label{
  background-color: lime;
}

/* ++ если нужно скрывать placeholder принудительно*/
:focus::placeholder {
  color: transparent;
}

<input class="form-control test" list="datalistOptionsWaybill" id="waybill" placeholder="Hello, ...?">
<label for="waybill" class="form-label">Waybill</label>
<hr>

<input class="form-control" list="datalistOptionsWaybill" id="waybill">
<label for="waybill" class="form-label">Waybill</label>
<hr>

<select id="carsField" class="form-control">
<option>car</option>
<option>nocar</option>
</select>
<label for="carsField" class="form-label">Carrr</label>

БЛОГ НА HUSL

CSS анимация label для поля select

Ответы (1 шт):