Floating Label for Input box and textbox

Developed by Ravi Makwana

by RaviMakwana

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
 <div class="col-10">
   <div class="floating-label-group">
     <input required />
     <label class="floating-label">First Name</label>
   </div>

   <div class="floating-box">
     <label>Email</label>
     test@gmail. com
   </div>
 </div>

CSS

.floating-label-group {
        position: relative;
        margin-top: 15px;
        margin-bottom: 25px;
    }

        .floating-label-group .floating-label {
            font-size: 14px;
            color: #6c757d;
            position: absolute;
            pointer-events: none;
            top: 5px;
            left: 12px;
            white-space: nowrap;
            transition: all 0.1s ease;
        }

        .floating-label-group input {
            border: 1px solid #6c757d;
            border-radius: 6px;
            padding: 4px 5px 4px 20px;
            font-size: 14px;
            min-height: 31px;
            width: 100%;
        }

        .floating-label-group input:focus ~ .floating-label,
        .floating-label-group input:not(:focus):valid ~ .floating-label {
                box-shadow: inset 0px 0px 0px 20px rgb(255 255 255), 0px -2px 5px 0px rgb(255 255 255);
                margin-top: -10px;
                margin-left: -7px;
                padding: 0px 4px;
                font-size: 12px;
                color: #6f6868;
                line-height: 1;
        }
        
                
        /*---------- for readonly box--------*/
        
        
    .floating-box {
        border: 1px solid #6c757d;
        border-radius: 6px;
        padding: 4px 20px;
        font-size: 14px;
        min-height: 31px; 
    }

        .floating-box label {
            box-shadow: inset 0px 0px 0px 8px rgb(255 255 255);
            position: absolute;
            margin-top: -13px;
            margin-left: -15px;
            padding: 0px 4px;
            font-size: 15px;
            line-height: 1;
            white-space: nowrap;
        }