Угловая фокусировка на вводе при нажатии на элемент ⇐ CSS

[Anonymous]

Я прикрепил stackblitz ниже

https://stackblitz.com/edit/angular-dgx3pe

Чего я пытаюсь достичь, так это при нажатии на элемент метки он должен сосредоточиться на вводе. Следовательно, класс input:focus активируется. Я верю, что этого можно достичь с помощью javascript/ jquery. Но я предпочитаю угловой способ добиться этого.

Короче говоря, это две вещи, которые я пытаюсь сделать,

• Фокус на элементе ввода при щелчке по метке.
• Когда фокус переключается на другой элемент ввода и если предыдущий элемент не пуст (если какое-то значение вводится). Ярлык должен сохранять свое положение вверху.

HTML


Name


Name



CSS

p {
font-family: Lato;
}
.input
{
border:none;
border-bottom:1px solid grey;
outline:none;
margin-top:20%;
}
.input:focus
{
border-bottom:1px solid orange;
}
.label
{
position:relative;
left:-170px;
}
.input:focus + .label
{
bottom:20px;
}


Подробнее здесь: https://stackoverflow.com/questions/564 ... an-element