在字段顶部的引导5浮动标签

Question

我想把浮动的标签像这样：

​

正常的行为是这样的，但是对于我的目的来说，输入区域是很大的。

​

我不知道该怎么安排这个。对于Bootstrap 4，有一个额外的框架，但这不适用于V5。

提前感谢！

Answer 1

您可以覆盖相应的引导5 css类：

.form-floating>.form-control:focus~label,
.form-floating>.form-control:not(:placeholder-shown)~label,
.form-floating>.form-select~label {
  opacity: .65;
  transform: scale(.85) translateY(-.5rem) translateX(.15rem);
}

将translateY(-.5rem)设置为-2 2rem或-20 to或任何适合您的布局。你也可以设置背景:白色；

Answer 2

您可以使用<fieldset>和<legend>来插入<input>

<fieldset>
    <legend>Password</legend>
    <input type="password">
</fieldset>

然后根据需要使用CSS设置填充/边距/边框等。

更多信息：https://www.w3schools.com/tags/tag_fieldset.asp