Textbox text hides for floating label Textbox Style - html

Question

I want to convert the label into floating style for textboxes in my form. I have performed the action on Hover and focus of the input box. The problem here is when the label floats and moves up the text is getting hidden.
Here is my HTML and CSS that i have tried so far.
.float-label {
position: absolute;
left: 0;
top: 0;
padding: 10px 6px;
color: #767676;
pointer-events: none;
transition: 0.2s ease all;
}
.form-control:focus ~ .float-label,
.form-control:not(:focus):valid ~ .float-label {
top: -18px;
margin-left:5px;
font-size: 12px;
opacity: 1;
z-index: 1;
background-color: white;
}
<div class="form-group border-lable-flt">
<input type="email" class="form-control" id="work_email" required>
<label class="float-label" for="workEmail">Work email</label>
</div>

Answer 1

You can use :placeholder-shown pseudo-class. If you don't want to make color: transparent the placeholder text, you can perfect-pixel match the styles for label and placeholder.
.form-group {
position: relative;
padding: 20px;
}
.float-label {
position: absolute;
left: 25px;
top: 21px;
color: #767676;
pointer-events: none;
transition: 0.2s ease all;
}
input::placeholder {
color: transparent;
}
.form-control:focus ~ .float-label,
.form-control:not(:focus):valid ~ .float-label,
input:not(:placeholder-shown) ~ .float-label {
top: 5px;
font-size: 12px;
opacity: 1;
z-index: 1;
background-color: transparent;
}
<div class="form-group border-lable-flt">
<input type="email" class="form-control" id="work_email" required placeholder="Work email">
<label class="float-label" for="workEmail">Work email</label>
</div>

Answer 2

Try to do the following changes :
.form-group{
margin-top:20px;
position:relative;
}
.float-label {
position: absolute;
left: 0;
top: 0;
padding:0;
color: #767676;
pointer-events: none;
transition: 0.2s ease all;
}

Answer 3

use this code:
Html:
<div class="form-group border-lable-flt textinput">
<input type="email" id="email" class="form-control" />
<label for="email">Email address</label>
</div>
CSS:
.textinput {
height: 3em;
margin: 1em 0;
position: relative;
width: 100%;
}
.textinput input,
.textinput label {
cursor: text;
font-size: 1.5em;
padding: 0.6em 1% 0.15em 1%;
position: absolute;
transition: all 0.15s ease;
width: 98%;
}
.textinput input {
border: solid black 1px;
border-radius: 0.15em;
}
.textinput label {
color: #BCB9B8;
padding: 0.5em 1%;
}
.textinput input.filled ~ label,
.textinput input:focus ~ label {
font-size: 0.6em;
font-weight: 600;
position: absolute;
}
.textinput input.filled ~ label {
color: #007932;
}
.textinput input[type="text"].filled,
.textinput input[type="email"].filled:valid {
background: #B8DB9B;
}
.textinput input[type="text"].filled ~label:after,
.textinput input[type="email"].filled:valid ~label:after {
color: #007932;
content: "\f058";
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: 3em;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
position: absolute;
top: 0.3em;
right: 0.3em;
transform: translate(0, 0);
}