Looking for a good floating lable implementation that works with Bootstrap
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"...