用于文本区域的 Bootstrap 5 浮动标签与滚动输入重叠

Posted 2023-05-07

【中文标题】用于文本区域的 Bootstrap 5 浮动标签与滚动输入重叠

【英文标题】：Bootstrap 5 floating label for a textarea overlaps with input on scroll

【发布时间】：2021-06-26 00:22:22

【问题描述】：

查看文本区域的浮动标签https://getbootstrap.com/docs/5.0/forms/floating-labels/ 的文档，如果内容可滚动，则标签似乎与输入重叠：

有没有办法防止这种情况并在标签下方设置可滚动区域？

【参考方案1】：

这是 Bootstrap 5 的一个已知问题：#32800。

在他们修复此错误之前，我所做的只是一个小技巧。

基本上我在 textarea 和 label 之间放置了一个伪元素，背景颜色为白色。

.form-floating 
  position: relative;
  max-width: 300px; /* not relevant */
  margin: 40px 20px; /* not relevant */


.form-floating:before 
  content: '';
  position: absolute;
  top: 1px; /* border-width (default by BS) */
  left: 1px; /* border-width (default by BS) */
  width: calc(100% - 14px); /* to show scrollbar */
  height: 32px;
  border-radius: 4px; /* (default by BS) */
  background-color: #ffffff;


.form-floating textarea.form-control 
  padding-top: 32px; /* height of pseudo element */
  min-height: 80px; /* not relevant */

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">

<div class="form-floating fix-floating-label">
    <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
  <label for="floatingTextarea">Comments</label>
</div>

【参考方案2】：

首先将input_textarea 之类的类添加到父div 中，即textarea 输入，然后添加这个css：

.form-floating.input_textarea label 
    min-width: 90%;


    .form-floating.input_textarea label::before 
        content: "";
        position: absolute;
        top: 0.9em;
        z-index: -1;
        width: 100%;
        height: 1.2em;
        background-color: white;
        box-shadow: 0 0 8px 4px #ffffff;
    


.form-floating.input_textarea > .form-control:focus ~ label, .form-floating.input_textarea > .form-control:not(:placeholder-shown) ~ label, .form-floating.input_textarea > .form-select ~ label 
    opacity: 0.95;
    color: gray;