标题几乎总结了一下,到目前为止是一个演示和CSS。



.edit.input {
    display: inline-block;
}

.edit.input input {
    border: none;
    border-bottom: 1px solid #D4D4D5;
}

.edit.input input:focus {
    outline: none;
    border: transparent;
}

.bar {
    display: block;
}

.bar:after {
    content: '';
    display: block;
    transform: scaleX(0);
    bottom: -2px;
    height: 2px;
    background: #48afb9;
    transition: 300ms ease all;
}

.edit.input input:focus ~ .bar:after {
    transform: scaleX(1);
}

<div class="edit input">
    <input type="text">
    <span class="bar"></span>
</div>

<br>
<br> stuff
<br> other stuff





https://jsfiddle.net/a554h0oo/

我想要达到的目标:

html - 边框过渡导致内容移位-LMLPHP

这是我得到的:

html - 边框过渡导致内容移位-LMLPHP

最佳答案

设置border:transparent时,将顶部的边框宽度重置为1。

改为设置边框颜色



.edit.input {
    display: inline-block;
}

.edit.input input {
    border: none;
    border-bottom: 1px solid #D4D4D5;
}

.edit.input input:focus {
  outline: none;
    border-color: transparent; /* changed */
}

.bar {
    display: block;
}

.bar:after {
    content: '';
    display: block;
    transform: scaleX(0);
    bottom: -2px;
    height: 2px;
    background: #48afb9;
    transition: 300ms ease all;
}

.edit.input input:focus ~ .bar:after {
    transform: scaleX(1);
}

<div class="edit input">
    <input type="text">
    <span class="bar"></span>
</div>

<br>
<br> stuff
<br> other stuff

07-24 09:44
查看更多