Material Floating Labels

by Ayyappan Sakthivadivel

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="form-group">
    <label class="control-label" for="inputNormal">Normal input</label>
    <input type="text" class="form-control edit disable-element" id="inputNormal" />
    <a href="#" class="fa fa-edit edit-icon-align"></a>
</div>

<div class="form-group has-warning">
    <label class="control-label" for="inputWarning">Password</label>
    <input type="password" class="form-control edit disable-element" id="inputWarning"/>
    <a href="#" class="fa fa-edit edit-icon-align"></a>
</div>

<div class="form-group-dd has-warning">
    <label class="control-label" for="inputWarning">Warning input</label>
    <select class="form-control-dd">
        <option>test1</option>
        <option>test2</option>
        <option>test3</option>
        <option>test4</option>
        <option>test5</option>
    </select>
</div>

CSS

body {
    padding: 20px;
}

/* --- material floating label --- */

.form-group {
    display: flex;
    height: 55px;
    border: 0;
    position: relative;
}

.control-label {
    font-size: 16px;
    font-weight: 400;
    opacity: 0.4;
    pointer-events: none;
    position: absolute;
    transform: translate3d(0, 22px, 0) scale(1);
    transform-origin: left top;
    transition: 240ms;
}

.form-group.focused .control-label {
    opacity: 1;
    transform: scale(0.75);
}

.form-control {
    align-self: flex-end;
    border: 0;
    border-bottom: #333 solid 1px;
    border-radius:0;
    padding-left: 0;
}

.form-control::-webkit-input-placeholder {
    transition: 240ms;
}

.form-control:focus::-webkit-input-placeholder {
    transition: none;
    border: 0;
}

.form-group.focused .form-control::-webkit-input-placeholder {
    color: #bbb;
    border: 0;
}

.form-control:focus{
  box-shadow: none;
}

.edit-icon-align{
    position:absolute;
    z-index:1000;
    top:50%;
    right:0;
}
a.edit-icon-align{
     text-decoration: none !important;
}

.disable-element{
  pointer-events: none;
}


/**/
.form-group-dd.focused .control-label {
    opacity: 1;
    transform: scale(0.75);
}


.form-control-dd {
  width:100%;
    align-self: flex-end;
    margin-top: 25px;
    border: 0;
    border-bottom: #333 solid 1px;
    border-radius:0;
    padding-left: 0;
}

.form-control-dd::-webkit-input-placeholder {
    transition: 240ms;
}

.form-control-dd:focus::-webkit-input-placeholder {
    transition: none;
    border: 0;
}

.form-group-dd.focused .form-control-dd::-webkit-input-placeholder {
    color: #bbb;
    border: 0;
}

.form-control-dd:focus{
  box-shadow: none;
}

select{
  padding-bottom:10px;
}
/**/

JavaScript

$('.form-control').on('focus blur', function (e) {
    $(this).parents('.form-group').toggleClass('focused', (e.type === 'focus' || this.value.length > 0));
    $(this).addClass('disable-element');
}).trigger('blur');

$('.form-control-dd').on('focus blur', function (e) {
    $(this).parents('.form-group-dd').toggleClass('focused', (e.type === 'focus' || this.value.length > 0));
}).trigger('blur');


    $(".edit-icon-align").click(function(){
        $(this).siblings('input').removeClass('disable-element');
        $(this).siblings('input').focus();
    });