Bootstrap 5 在 textarea 上的浮动标签

问题描述

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

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

解决方法

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

<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 概述了一些好的方法。

,

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

我在我的一个项目中添加了这种方式，效果很好。根据需要添加 padding-top 和 bottom。