Как мне наложить ввод HTML с цветным треугольником и текстом?

Question

У меня есть HTML-форма, которая выглядит следующим образом:

Но у меня не так много места, поэтому я хотел быиметь теги m: и f: в полях ввода.И я хочу указать, что они на самом деле не являются частью ввода, поэтому я бы хотел, чтобы они были частично скрыты полупрозрачными треугольниками, которые я хочу за темным жирным текстом, чтобы, если кто-то печатаетбольше текста. Треугольник не будет таким релевантным, вроде как:

Недавно я видел такие вещи на веб-формах проверки, которые спрашиваютдля имени человека и CCN, и когда я начинаю печатать в поле, текст легенды перемещается вверх и сжимается.

Есть ли прямой способ сделать это?

Answer 1

Используйте простой фон для элемента ввода:

label {
  position:absolute;
}
input {
  background:linear-gradient(to top left,transparent 49.5%,rgba(255,0,0,0.5) 50%) left/20px 100% no-repeat;
  padding-left:20px;
  border:1px solid;
}

<div class="box">
<label for="name">m:</label><input id="name" type="text">
</div>

Похожие: https://stackoverflow.com/a/49696143/8620333