CSS/HTML 使标签背景框与文本紧密贴合

Question

所以我有一个登录页面，我在其中创建了一个我喜欢的简单设计，其中包含输入字段及其相应的标签。正如您从下图中看到的，我已将标签移动到输入字段顶部边框的顶部，然后确保它位于 z-index 的顶部。

当背景为白色时，这看起来完全没问题，但是当我更改背景时，我的问题就会突出显示。正如您所看到的，标签的背景“框”正在显示。我知道我可以改变它的颜色，但我真正想要的是它是透明的。但如果将其设置为透明，您可以看到输入字段的顶部边框（另请参见图片）。有没有办法让背景框“紧密”地贴合文本，或者甚至使背景框的高度小于文本高度？

也许有一种方法可以以某种方式保存这个输入字段和标签设计，以便它从一开始就是它自己的东西，而不是我坐在现场创建的东西，从而引入我的问题。

HTML 片段：

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

<Stack direction="column" spacing={1}>
  <Stack direction="column" spacing={-0.85}>
    <label className="login_label" id="login_email_label" for="login_email">.email</label>
    <input className="login_input" type="email" id="login_email_input" name="login_email"/>
  </Stack> 
  <Stack direction="column" spacing={-0.85}>
    <label className="login_label" id="login_password_label" for="login_password">.password</label>
    <input className="login_input" type="password" id="login_password_input" name="login_password"/>
  </Stack> 
</Stack>

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

Answer 1

我不知道它与 Stacks 的配合效果如何，但会做你想做的事。尝试可运行的代码片段。

我把内部改成了 我用 a 替换了字段集

出于演示目的，我将外部更改为 出于演示目的，我将 className 更改为 class

.login_label, .register_label{
    position: relative;
    left: -2px;
    width:max-content;
    display: block;
    font-family: 'AvenirBold';
    font-size: 12px;
    color: gray;
    /* EDIT Leave the label background transparent */
    /* 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;
    /* EDIT Remove the border around the <input>, so it blends into the <fieldset> */
    border: 0px;
}

/* NOTE These .Stack settings are specific to my demo code */
.Stack {
  margin: 1rem;
  width: max-content;
}
.Stack.Dark {
  background-color: #B3B0B0;
}
.Stack.Light {
  background-color: white;
}
.Stack fieldset {
  background-color: white;
}
.Stack legend {
  padding-bottom: 0.5rem;
  font-size: 1.4rem;
}

/* NOTE These button settings are specific to my demo code  */
button.Big {
  font-size: 1.5rem;
  font-weight: bold;
  padding: 0.5rem 4rem;
  margin: 0.2rem;
  background-color: #696969;
}

<div class="Stack Light">
  <fieldset class="Stack">
    <legend class="login_label">.email</legend>
    <input class="login_input" type="email" id="login_email_input" name="login_email"/>
  </fieldset>

  <fieldset class="Stack">
    <legend class="login_label">.password</legend>
    <input class="login_input" type="password" id="login_password_input" name="login_password"/>
  </fieldset>

  <button class="Big">Login</button>
  <button class="Big">Back</button>
</div>

<hr>

<div class="Stack Dark">
  <fieldset class="Stack">
    <legend class="login_label">.email</legend>
    <!-- <label class="login_label" for="login_email">.email</label> -->
    <input class="login_input" type="email" id="login_email_input" name="login_email"/>
  </fieldset>

  <fieldset class="Stack">
    <legend class="login_label">.password</legend>
    <!-- <label class="login_label" for="login_password">.password</label> -->
    <input class="login_input" type="password" id="login_password_input" name="login_password"/>
  </fieldset>

  <button class="Big">Login</button>
  <button class="Big">Back</button>
</div>