CSS/HTML плотно прилегает к тексту фонового поля метки ⇐ CSS

[Anonymous]

Итак, у меня есть страница входа, на которой я создал простой дизайн, который мне нравится, с полями ввода и соответствующими им метками. Как вы можете видеть на рисунке ниже, я переместил метку поверх верхней границы полей ввода, а затем убедился, что она находится поверх z-индекса.
Выглядит совершенно нормально. когда фон белый, но когда я меняю фон, моя проблема выделяется. Как вы можете видеть, отображается фоновая «коробка» метки. Я знаю, что могу просто изменить цвет этого объекта, но на самом деле я хочу, чтобы он был прозрачным. Но если вы сделаете его прозрачным, вы сможете увидеть верхнюю границу поля ввода (см. также рисунок). Есть ли какой-нибудь способ «плотно» подогнать фоновое поле к тексту или, возможно, даже сделать высоту фонового поля меньше высоты текста?
Возможно, есть даже способ как бы сохранить это поле ввода и дизайн метки каким-то образом, чтобы с самого начала это было само по себе, а не что-то, что я сижу и создаю на месте, создавая тем самым свою проблему.
HTML фрагмент:

Код: Выделить всё

import React from 'react';
import Stack from '@mui/material/Stack';



.email



.password

Фрагмент CSS:

Код: Выделить всё

.login_label, .register_label{
position: relative;
left: -2px;
width:max-content;
display: block;
font-family: 'AvenirBold';
font-size: 12px;
color: gray;
background-color: white;
padding: 0 1px;
z-index: 2;
user-select: none;
}

.login_input, .register_input{
height: 25px;
font-family: 'AvenirDemi';
z-index: 1;
font-size: 12px;
padding-top: 5px;
box-sizing: border-box;
}

Подробнее здесь: https://stackoverflow.com/questions/790 ... ly-to-text