寻找与Bootstrap一起使用的良好浮动标签实现

Question

是否有人知道可以在所有浏览器上使用Bootstrap的良好浮动标签实现。我从Material Design（下面的代码）中找到了一个，但是我希望文本框具有边框，并且占位符可以转换为字段集的图例之类的东西。任何适用于所有浏览器的实现都将受到赞赏。

这是“材料设计”的东西：

    .form-group {
  position: relative;
  margin-bottom: 1.5rem;
}

.form-control-placeholder {
  position: absolute;
  top: 0;
  padding: 7px 0 0 13px;
  transition: all 200ms;
  opacity: 0.5;
}

.form-control:focus + .form-control-placeholder,
.form-control:valid + .form-control-placeholder {
  font-size: 75%;
  transform: translate3d(0, -100%, 0);
  opacity: 1;
}

    <div class="container my-5">
  <div class="row">
    <div class="col-md-6 mx-auto">
      <div class="form-group">
        <input type="text" id="name" class="form-control" required>
        <label class="form-control-placeholder" for="name">Name</label>
      </div>
      <div class="form-group">
        <input type="password" id="password" class="form-control" required>
        <label class="form-control-placeholder" for="password">Password</label>
      </div>
    </div>
  </div>
</div>

Answer 1

Bootstrap 4文档中有一个浮动标签示例，但被认为是“实验”

https://getbootstrap.com/docs/4.1/examples/floating-labels/

并非完全是“所有浏览器”，而是专门说“可以在最新的Chrome，Safari和Firefox中使用”。

Answer 2

我为 Bootstrap 4 和 5 创建了一个输入浮动标签：https://github.com/tkrotoff/bootstrap-floating-label

这里是在线演示：https://codesandbox.io/s/github/tkrotoff/bootstrap-floating-label/tree/codesandbox.io