Ввод контура материала — создание выреза в Angular ⇐ CSS

[Anonymous]

Привет, я пытаюсь реализовать ввод пользовательского контура материала, который включает в себя выемку, где плавает метка.
Я знаю, что существует существующий компонент для Angular Material, но мне нужно его иметь моя собственная особая настройка, поэтому я создаю свою собственную.
Я зашел так далеко в создании плавающего элемента, но у меня возникли проблемы с созданием реальной выемки. Я видел решения, в которых за меткой был просто белый фон, но в моем случае это не сработало, поскольку фон ввода имеет другой цвет.
Любая помощь/стратегия, которая лучше всего подойдет для этого, была бы отличной. Я согласен с использованием JS, если он будет работать одинаково в нескольких браузерах, это главное. Заранее большое спасибо.
Вот мой стек
https://stackblitz.com/edit/angular-u5n ... mComponent. html,src%2Fapp%2Fexample.comComponent.ts,src%2Fapp%2Fexample.comComponent.css,src%2Fapp%2Fapp.comComponent.html,src%2Fapp%2Fapp.comComponent.css

ожидается:


Код:
HTML


Label

CSS
.material-textfield {
position: relative;
}

.label-container {
position: absolute;
font-size: 1rem;
left: 0;
top: 50%;
transform: translateY(-50%);
background-color: transparent;
color: gray;
padding: 0 0.3rem;
margin: 0 0.5rem;
transition: 0.1s ease-out;
transform-origin: left top;
pointer-events: none;
}
input {
font-size: 1rem;
outline: none;
border: 1px solid gray;
border-radius: 5px;
padding: 1rem 0.7rem;
color: gray;
transition: 0.1s ease-out;

background-color: beige;
}
input:focus {
border-color: #6200ee;
}
input:focus + .label-container {
color: #6200ee;
top: 0;
transform: translateY(-50%) scale(0.9);
border-color: #6200ee; /* Color on focus */
}

input:not(:placeholder-shown) + .label-container {
top: 0;
transform: translateY(-50%) scale(0.9);
border-color: #6200ee; /* Color when input is not empty */
}


Подробнее здесь: https://stackoverflow.com/questions/784 ... in-angular