CSS代码：

Question

是按预期的风格和显示的，一切都很好：

wodey，创建围绕SVG的标签创建了一些问题，因此我在CSS中添加了一些额外的代码，以修复此隐藏一个仅适用于语音读取器的文本标签，我现在将我的CSS ass as：

.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;
}

和html的形式为：

  <form action="/login" method="post">
    <div class="formLayout">
      <div class="box">
        <label for="username">
          <svg class="formIcon"><use href="/img/icons.svg#icon-user"></use></svg>
          <em>Username</em>
        </label>
      </div>
    <div class="field"><input type="text" class="text" name="username" placeholder="Username" id="username" required></div>

    <div class="full spacer"></div>

    <div class="box">
      <label for="password">
        <svg class="icon"><use href="/img/icons.svg#icon-lock"></use></svg>
        <em>Password</em>
      </label>
    </div>
    <div class="field"><input type="password" class="text" name="password" placeholder="Password" id="password" required></div>

    <div class="full spacer"></div>

但是，这很好地显示了，但是，我刚刚意识到单击用户名图标将重点放在密码字段上！ （密码图标还将重点放在密码字段上）。在将其放置在网格中之前，标签可以正常工作，因为SVG图标选择了相应的输入字段。

我可以解决这个问题吗？ 不仅要抛弃标签元素会很高兴...

按照C3roe的评论，实际上，标签字段本身的大小远高于其所包含的SVG。

通过将高度和宽度属性添加到SVG标签本身，该标签仅包围了SVG元素，从而非常简单地解决了这一点。