Javascript jQuery联系人表单标题移动效果

我正在创建一个如下所示的联系我们表单。
演示： 我想做的是，当我在文本框上键入文本时，文本框标题移到顶部。 我该怎么做呢。我用小提琴写了一些代码。 你能帮我做这份工作吗？ 小提琴：

HTML

元素应该放在选择器的

元素之后

输入：focus+i

以匹配HTML中的

元素

您可以使用CSS

：在

伪元素之前，

attr（）

函数引用HTML中的

数据-*

属性，

动画

和

转换

以获得效果

。边框样式{
边框宽度：0 1px 0；
位置：相对位置；
z指数：2；
边界半径：0；
高度：40px；
字号：17px；
边框颜色：#e6；
左侧填充：45px；
背景色：透明！重要；
背景位置：左中；
背景重复：无重复；
背景尺寸：40px 40px；
字体家族：继承；
-webkit盒阴影：无；
盒影：无；
}
.边框样式：焦点{
盒影：无；
}
.form-group2输入：焦点+i{
颜色：蓝色；
}
.表格一，
.表格组2{
显示器：flex；
对齐项目：居中；
}
.表格一，
.表格2 i{
顺序：1；
右侧填充：0.5em；
}
.表格组输入：焦点+i{
颜色：蓝色；
}
.表格组输入：焦点+i{
颜色：蓝色；
}
.表格组输入：焦点+i:之前{
内容：attr（数据占位符）；/*设置内容*/
位置：相对位置；
字号：17px；
左：-214px；
顶部：0px；
转换：所有1s轻松；/*设置转换*/
动画：占位符1s向前移动；设置动画*/
}
/*在i元素上做动画*/
@关键帧占位符{
到{
顶部：-12px；
字体大小：12px；
文本对齐：居中；
左：-204px；
}
}

使用Materialize CSS框架轻松实现这一点，它们提供了相同的功能。使用此简单而完美的@Ashishsah库不需要满足要求。非常感谢。它工作正常。但当数据存在时，我想在文本框下面加下划线。有什么想法吗@非常感谢，很好用。但当数据存在时，我想在文本框下面加下划线。有什么想法吗？@sanbg Include

。边框样式：焦点{border width:0 0 1px 0；outline:none；}

在CSST感谢您的帮助。

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="container">
    <div class="col-md-5">
        <form role="form">
            <div class="form-group inner-addon left-addon">
                <i class="fa fa-user-o" aria-hidden="true"></i>
                <input class="form-control user border-style" name="username" placeholder="Username" />
            </div>
            <br>
            <div class="form-group inner-addon left-addon">
                <i class="fa fa-user-o" aria-hidden="true"></i>
                <input class="form-control user border-style" name="username" placeholder="Username" />
            </div>
        </form>
    </div>
</div>

.border-style {
    border-width: 0 0 1px 0;
    position: relative;
    z-index: 2;
    border-radius: 0;
    height: 40px;
    font-size: 17px;
    border-color: #e6e6e6;
    padding-left: 45px;
    background-color: transparent!important;
    background-position: left center;
    background-repeat: no-repeat;
    background-size: 40px 40px;
    font-family: inherit;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.border-style:focus {
    box-shadow: none;

}

.form-group2 input:focus+i {
    color: blue;
}
.form-group1,
.form-group2 {
    display: flex;
    align-items: center;
}
.form-group1 i,
.form-group2 i {
    order: 1;
    padding-right: 0.5em;
}
.form-group input:focus+i {
    color: blue;
}