Bootstrap 5 的浮动标签在 textarea 上

Question

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

Answer 1

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

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

Answer 2

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

<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。

Bootstrap 5 的浮动标签在 textarea 上

Bootstrap 5's floating label on textarea

textarea

twitter-bootstrap

floating-labels