Проблемы элемента метки внутри сетки, как выбрать правильное поле ввода ⇐ Html

[Anonymous]

С кодом CSS: < /p>
.formLayout {
width: 400px;
display: grid;
grid-template-columns: 50px, 350px;
}
.formLayout svg {
stroke: rgb(255, 255, 255);
width: 36px !important;
}
.formLayout .box {
display: grid;
background-color: #3f5fa0;
width: 50px;
height: 50px;
align-items: center;
justify-content: center;
}
< /code>
my svg в форме: < /p>





< /code>
определяется и отображается, как и ожидалось, и все в порядке: < /p>
Однако создание метки, окружающей SVG, создал несколько проблем, поэтому я добавил Небольшой дополнительный код в CSS, чтобы исправить это, скрыть текстовую метку, которая находится только для голосовых считывателей, у меня теперь есть CSS как: < /p>
.formLayout {
width: 400px;
display: grid;
grid-template-columns: 50px, 350px;
}
.formLayout label {
display: grid;
position: absolute;
justify-self: center;
}
.formLayout label em {display: none}
.formLayout svg {
stroke: rgb(255, 255, 255);
width: 36px !important;
}
.formLayout .box {
display: grid;
background-color: #3f5fa0;
width: 50px;
height: 50px;
align-items: center;
justify-content: center;
}
< /code>
и html для формы как: < /p>





Username






Password




< /code>
Это хорошо отображается, однако я только что понял, что щелчок значок имени пользователя сосредоточен на поле пароля! (Значок пароля также сосредоточен на поле пароля). Перед тем, как уложить это в сетку, этикетки работали нормально, когда значки SVG выбирали соответствующее поле ввода. < /P>
Как это исправить? Элементы метки ...

Подробнее здесь: https://stackoverflow.com/questions/794 ... nput-field