Фон: я пытаюсь использовать метку с плавающей запятой в раскрывающемся списке, используя CSS. Я реализовал по ссылке: https://codepen.io/dannibla/pen/amgRNR
Он отлично работает, если нет предварительно выбранного значения (Новая форма). При щелчке раскрывающегося списка метка перемещается вверх, но в случае, если у меня есть предопределенное значение (подумайте о форме редактирования), метка с плавающей запятой не работает, поскольку Value="" не обновляется до параметра, выбранного при запуске -время по angular. Даже по ссылке на код, которую я предоставил, если вы измените параметр Алабама на выбранный по умолчанию.
<option value="1" selected>Alabama</option>
you will see the float-label and this selected value are overlapping. Here the float-label didn't work with the pre-defined selected value. Same situation I have in angular.
{{d.Project_Type_Name}} Выберите тип проекта
CSS
.floating-select:not([value=""]):valid ~ label {
top:-2px !important;
font-size:12px !important;
font-weight: 800 !important;
color:#5264AE;
}
Здесь, в режиме редактирования формы , выпадающее значение выбирается заранее, но css по-прежнему определяет value="", и я думаю, поэтому не плавающая метка вверху, как в случае варианта Алабамы (прикрепленный снимок экрана). Я действительно не предпочитаю использовать javascript для обходного пути в angular, но если выбора нет, я не буду возражать.
введите описание изображения здесь
Заранее спасибо.