Ищете хорошую реализацию плавающей метки, которая работает с Bootstrap

Question

Кто-нибудь знает о хорошей реализации плавающей метки, которая будет работать с Bootstrap во всех браузерах. Я нашел один из Material Design (код ниже), но я хотел бы, чтобы текстовое поле имело границу и заполнитель для перехода в нечто вроде легенды fieldset. Любая реализация, которая работает во всех браузерах, приветствуется.

Вот материал Материал дизайна:

    .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».