浮动标签与预先填充的输入重叠

Question

在输入中预先填充值时，该值与标签重叠。

要求是，在input中预先填充值时，它不应与标签重叠。而且，如果用户删除输入值并更改焦点，它应该具有过渡效果。

CSS代码：

.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; }
}

Answer 1

不要使用 position：absolute; ，而是使用 position：in代替; （在 .label-float 上）。这样可以保持文档流中元素的一部分，即顺序和位置正确，并且您仍然可以使用它的 top 参数创建偏移量并为其设置动画。

Answer 2

使用JS触发变化

$("#id").val("new value").trigger("change");