标题几乎总结了一下,到目前为止是一个演示和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/
我想要达到的目标:
这是我得到的:
最佳答案
设置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