/* SAMPLE IMPLEMENTAION */
/*
https://w3bits.com/css-floating-labels/
<link href="Css/FloatingLabels.css" rel="stylesheet" />
<div class="col-sm-8 floating-label-wrap">
    <asp:TextBox ID="txtContactUsEmail" runat="server" 
        ClientIDMode="Static" 
        CssClass="form-control input-lg floating-label-field floating-label-field-default" 
        placeholder="Email Address"
        EnableViewState="true" 
        MaxLength="120"  
        aria-labelledby="labelTxtContactUsEmail" />
    <label for="txtContactUsEmail" class="floating-label">Email Address</label>
</div>
*/

/* Making the label break the flow */
.floating-label {
    position: absolute;
    top: 0;
    left: 0;
    user-select: none;
    z-index: 1500;
}

/* Hide the browser-specific focus styles */
.floating-label-field {
    /*color: rgba(44, 62, 80, .75);*/
    border-width: 0;
    z-index: 2000;
}

.floating-label-field:focus {
    /*outline: 0;
    box-shadow: 0;*/
}

.floating-label-field::placeholder {
    color: rgba(44, 62, 80, .5);
}

/* Make the label and field look identical on every browser */
.floating-label,
.floating-label-field {
    font: inherit;
    line-height: 1;
    display: block;
    width: 100%;
}

.floating-label-field,
.floating-label-wrap {
    position: relative;
}

/* Input Style Default */
.floating-label-field-default {
    /*
    padding: 1.5em;
    transition: border-color .25s ease-in-out;
    color: rgba(255, 255, 255, .75);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 5px;
    background-color: transparent;
    */
    border: 1px solid #ccc;
}

.floating-label-field-default + .floating-label {
    position: absolute;
    top: 1.3em;
    left: 1.6em;
    display: inline-block;
    width: auto;
    margin: 0;
    padding: .1em .5em .5em .1em;
    transition: transform .25s, opacity .25s, padding .25s ease-in-out;
    transform-origin: 0 0;
    /*color: rgba(255, 255, 255, .5);*/
    /*border: 1px solid #ccc;*/
}

.floating-label-field-default:focus,
.floating-label-field-default:not(:placeholder-shown) {
    /*border-color: rgba(255, 255, 255, .1);*/
}

.floating-label-field-default:focus + .floating-label,
.floating-label-field-default:not(:placeholder-shown) + .floating-label {
    z-index: 2500;
    padding: .25em;
    transform: translate(0, -2em) scale(.9);
    color: rgba(000, 000, 000, .80);
    background-color: white;
}

/* Common Styles */
/* Identical inputs on all browsers */

.floating-label-field--s1:not(textarea),
.floating-label-field--s2:not(textarea),
.floating-label-field-default:not(textarea) {
    max-height: 4em;
}

/*.floating-label-field--s1,
.floating-label-field--s1 + .floating-label,
.floating-label-field--s2,
.floating-label-field--s2 + .floating-label {
    padding: 1.5em;
}

.floating-label-field--s1 + .floating-label,
.floating-label-field--s2 + .floating-label {
    z-index: 1500;
}*/

.floating-label-field-default::placeholder {
    /*color: transparent;*/
}