Floating Labels overlapping with pre filled inputs

When the input is pre-filled with values, the value overlaps with the label.

The requirement is, when input is pre-filled with values it should not overlap the label. And if a user removes the input value and changes focus, it should have the transition effect.

input

CSS code:

.input-float
font-size:14px;
padding:10px 10px 10px 5px;
display:block;
width:100%;
border:none;
border-bottom:1px solid #757575;

.input-float:focus outline:none;

/* LABEL ======================================= */
.label-float
color:#999;
font-size:14px;
font-weight:normal;
position:absolute;
pointer-events:none;
left:5px;
top:10px;
transition:0.2s ease all;
-moz-transition:0.2s ease all;
-webkit-transition:0.2s ease all;


/* active state */
.input-float:focus ~ .label-float
top:-20px;
font-size:14px;
color:#5264AE;


/* BOTTOM BARS ================================= */
.bar position:relative; display:block; width:100%;
.bar:before, .bar:after
content:'';
height:2px;
width:0;
bottom:1px;
position:absolute;
background:#5264AE;
transition:0.2s ease all;
-moz-transition:0.2s ease all;
-webkit-transition:0.2s ease all;

.bar:before
left:50%;

.bar:after
right:50%;


/* active state */
.input-float:focus ~ .bar:before, .input-float:focus ~ .bar:after
width:50%;


/* HIGHLIGHTER ================================== */
.highlight
position:absolute;
height:60%;
width:100px;
top:25%;
left:0;
pointer-events:none;
opacity:0.5;


/* active state */
.input-float:focus ~ .highlight
-webkit-animation:inputHighlighter 0.3s ease;
-moz-animation:inputHighlighter 0.3s ease;
animation:inputHighlighter 0.3s ease;


/* ANIMATIONS ================ */
@-webkit-keyframes inputHighlighter
from background:#5264AE;
to width:0; background:transparent;

@-moz-keyframes inputHighlighter
from background:#5264AE;
to width:0; background:transparent;

@keyframes inputHighlighter
from background:#5264AE;
to width:0; background:transparent;



1 Answer
1

Don't use position:absolute; , but position:instead; instead (on .label-float). This will keep the element part of the document flow, i.e. in the right order and place, and you can still use it's top parameter to create an offset and animate that.

position:absolute;

position:instead;

.label-float

top

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.