查看文档中关于textarea浮动标签的https://getbootstrap.com/docs/5.0/forms/floating-labels/,如果内容可滚动,则标签会与输入重叠。
有没有办法防止这种情况并使标签下面的区域可滚动?
.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>
首先,将类input_textarea
添加到包含textarea
输入的父级div中,然后添加以下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;
}
这里是BlackSheep的答案,稍微适应了SCSS与Bootstrap变量进行样式和尺寸设置,并添加了一个特定类来仅针对文本区域进行目标选择。
$textarea-floating-label-pseudo-element-height: (
$form-floating-input-padding-t + ($font-size-base * $line-height-base)
) * 0.85 - $form-floating-padding-y;
// look at $form-floating-label-transform for "0.85"
.form-floating-textarea {
position: relative;
&:before {
content: "";
position: absolute;
top: $input-border-width;
left: $input-border-width;
width: calc(100% - $spacer); /* to show scrollbar */
height: $textarea-floating-label-pseudo-element-height;
border-radius: $input-border-radius;
background-color: $input-bg;
}
&.form-control:focus,
&.form-control:not(:placeholder-shown) {
padding-top: $textarea-floating-label-pseudo-element-height + ($form-floating-padding-y * 0.5); /* leave a little more space below the label */
}
}