Bootstrap 5在文本区域上的浮动标签

Question

我想以某种方式解决文本区域标签上的浮动标签和文本冲突。图片：

如果你想现场试用，这里的网站：https://getbootstrap.com/docs/5.0/forms/floating-labels/基本上只需输入4行或更多行。我知道他们可能会在未来解决这个问题，但我至少想要一个暂时的解决方案。有什么想法吗？

Answer 1

这有点取决于你如何定义“修复”，但一个简单的解决方案是在标签后面添加一个白色背景栏：

<div class="form-floating">
  <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2" style="height: 100px"></textarea>
  <label for="floatingTextarea2">Comments</label>
  <div></div>
</div>

.form-floating textarea:not(:placeholder-shown) ~ label ~ div {
    width: calc(100% - 2rem);
    height: 2rem;
    background-color: white;
    position: absolute;
    top: 1px;
    left: 1px;
    z-index: 1;
    padding-top: 1.625rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.form-floating textarea ~ label {
  z-index: 2;
}

另一种选择是在添加内容时自动增大文本区。here概述了几种很好的方法。

Answer 2

​

    <div class="mb-3 form-floating">
      <label for="" class="form-label">Textarea</label>
      <textarea class="form-control py-5"></textarea>
    </div>

​

我在我的一个项目中添加了这种方法，它工作得很好。根据需要添加填充-顶部和底部。