使用样式组件和React，如何在输入上制作浮动标签？

Question

我无法将标签浮动到输入中的正确位置。好吧，当我向输入元素添加占位符时，输入值时标签会出现在它应该出现的位置，但事实并非如此。当我删除占位符时，标签保留在最初应该在的位置，并且焦点按预期工作，但是当键入值时，标签会在键入的单词之间弹出，而它应该浮动并保持位置。

文中如有错误，敬请谅解。我正在使用谷歌翻译来写这篇文章。这是我的代码：

<FormControl>

            <InputForm type="text" placeholder="" id="name" />

            <LabelForm htmlFor="name">Nome</LabelForm>

            <ContactFormMsg>Errrrrrrrrrrrrrrrr</ContactFormMsg>

   </FormControl>

export const FormControl = styled.div`

  top: 2rem;

  padding: 1rem 0;

  position: relative;

  display: flex;

  flex-direction: column;

`;

export const InputForm = styled.input`

  position: relative;

  font-size: 1.5rem;

  font-weight: 400;

  width: 30rem;

  height: 3.5rem;

  border: 0.2rem solid #808080;

  border-radius: 3rem;

  outline: 0;

  background-color: white;

  color: #333;

  padding-left: 1rem;

  &::placeholder {

    color: transparent;

  }

  &:-webkit-autofill {

    -webkit-box-shadow: 0 0 0 5rem white inset;

  }

`;

export const ContactFormMsg = styled.small`

  position: absolute;

  /* visibility: hidden; */

  font-size: 1.2rem;

  font-weight: 700;

  bottom: -0.6rem;

`;

export const LabelForm = styled.label`

  position: absolute;

  top: 0.7rem;

  left: 1rem;

  font-size: 0.8rem;

  display: block;

  transition: 0.2s;

  color: #80868b;

  padding: 0 0.6rem;

  height: 0.7rem;

  background: white;

  text-align: center;

  pointer-events: none;

  ${InputForm}:not(:placeholder-shown) ~ & {

    font-size: 1.4rem;

    cursor: text;

    top: 1.9rem;

    left: 1.8rem;

    color: #80868b;

    font-weight: 400;

  }

  ${InputForm}:focus ~ & {

    top: 0.7rem;

    left: 1rem;

    font-size: 1rem;

    font-weight: 400;

    color: #1a73e8;

  }

`;

我希望我能让元素按预期浮动，但我做不到。我尝试遵循一些可能的解决方案，但它们对我不起作用。我还尝试使用 + 运算符而不是 ~，它给出了与描述相同的结果。也许我错过了一些愚蠢的事情，这就是我寻求帮助的原因。

Answer 1

看看这个。您可以导入浮动标签。 https://react-bootstrap.netlify.app/docs/forms/floating-labels