Looking for a good floating lable implementation that works with Bootstrap

Does anyone know of a good floating label implementation that will work with Bootstrap on all browsers. I found one from Material Design (code below), but I would like the textbox to have a border and the placeholder to transition into something like a fieldset's legend. Any implementation that works on all browsers would be appreciated.

Here is the Material Design stuff:

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


1 Answer
1

Bootstrap 4 documentation has an example of Floating Labels, but it is considered an 'Experiment'

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

Not quite 'all browsers' but specifically says 'Works in latest Chrome, Safari, and Firefox.'

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.