输入框样式
在网上看到了这样的一个输入框，感觉不错，学习一下，这里分析一下并实现它！
从图中，我们能看到他的基本组成，一个文本提示！上下各一个线条！以及输入框！
输入框的文本提示一般使用placeholder，但是placeholder的样式修改比较困难，并且不支持动画，而这里的提示文字是有动画的，所以不能使用placeholder，只能用标签来替换！
上下横线是反向运动，所以不可能是某一个元素的边框，只能是2个标签或者伪元素，
由于已经有了标签作为提示文字，所以input的placeholder不需要填写！图中还能看出input元素是没有背景色的，与整体的背景色保持一致！
首先是根据上面的分析做一个整体的架构！
一个input标签来接受用户输入，一个label来显示提示文字，由于提示文字需要有动画，所以在label标签中添加span标签来分离动画！然后为每一个元素设置css类！
<div class="content">
<input class="input" type="text" id="my_input">
<label class="input_label" for="my_input">
<span class="input_placeholder">提示文字！</span>
</label>
</div>
看看现在是什么样的
有点简陋
根据情况设置样式
.content {
position: relative;
margin: 2em 1em 1em;
display: inline-block;
width: 100%;
max-width: 300px;
}
.input {
position: relative;
float: left;
padding: 0.4em;
width: 100%;
box-sizing: border-box;
outline: none;
border: none;
background: transparent;
display: block;
}
.input_label {
position: absolute;
display: inline-block;
width: 100%;
box-sizing: border-box;
top: 0;
left: 0;
font-size: 0.75em;
text-align: left;
padding: 0.403em;
}
.input_placeholder {
position: relative;
display: block;
transition: transform 0.3s;
}
基础样式设置好了以后可以看到这样的情况了
还是有点简陋
接下来设置上下边框，这里使用伪元素before和after
.input_label::before, .input_label::after {
content: '';
position: absolute;
left: 0;
width: 100%;
height: 2px;
background: red;
transition: transform 0.3s;
}
.input_label::before {
top: 0;
}
.input_label::after {
bottom: 0;
}
然后再看看看效果！
有了上下边框！
动画分析：
从图中我们能看到，在Input标签获取焦点时有3个动画！提示文字上移，上面横条上移，下面横条下移！在input标签失去焦点，没有内容时回到原来的状态，在失去焦点有文字时，保持现有状态
第一个文字上移动
通过css选择器找到我们的提示文字 当.input类获取焦点以后，通过+选择器获取到label，在通过空格选择器找到span，然后做transform变化，在span标签的css中，我们已经为它设置了transition过渡效果！，所以就能平滑的看到变化了！
.input:focus + .input_label .input_placeholder {
transform: translate3d(0, -2.5em, 0);
}
在这里要注意下的是浏览器坐标，向下的是Y手，向上移动的化就需要-少Y轴的值！好了，现在看看效果
文字现在向上移动了
横条上下移动
接下来就是上下边框了！同理也是通过css3选择器找到有动画的内容！
.input:focus + .input_label::before {
transform: translate3d(0, -0.5em, 0);
}
.input:focus + .input_label::after {
transform: translate3d(0, 0.5em, 0);
}
看效果！
提示文字可以框选！不好
那么问题来了，提示文字可以框选！现在去掉框选
.input_label {
position: absolute;
display: inline-block;
width: 100%;
box-sizing: border-box;
top: 0;
left: 0;
font-size: 0.75em;
text-align: left;
padding: 0.403em;
user-select: none;
}
在.input_label中新增user-select为空，就能去掉框选了！
框选问题没了，新问题有来了
我们现在可以看到，框选虽然解决了，一个更加棘手的问题来了，不管怎样文字提示和边框都会在input标签失去焦点是回到原来的位置！
这里的一个解决思路是用2个css选择器控制同一个变换（transform）
实现的原理是：当同一个元素执行2个相同的变换（transform）时，这个变换（transform）只执行一遍（具体的我也不清楚，希望知道的人能告诉我为什么只执行一遍！）
就拿提示文字来说，现在的选择器方式是input标签获取焦点时找到它下面的label标签，再找到label标签中的span标签，我们把这个选择路径叫做A，A实际控制的是input标签获取焦点时的span标签，
我们现在需要一个选择路径B，B也要控制span标签，而且需要和A有相同的变换（transform），但是控制方式不一样，B要控制的是input中有内容时（或者没有内容时，这里使用有内容时的）的span标签，然后做相同的变换（transform），由于是同一个span标签并且变换（transform）相同，所以它只会执行一遍！
当选择路径A的span无效果时，如果选择路径B有效果，那span标签还是现有状态，不会回去到原来的位置！（上下横条同理）
所以我们就可以在input标签获取焦点是，给input标签的父标签或者下面的label标签的class属性新增一个hasVal(随便你自己设置)值，通过hasVal实现选择路径B，
这时就需要用到js来监听input的focus和blur事件，当input获取焦点时给input父标签或者下面的label标签新增一个hasVal类名，在blur中监听input是否有值，如果没有值就移除hasVal类名，这里为了方便，是用的是jquery！
.input:focus + .input_label .input_placeholder ,
.hasVal .input_placeholder {
transform: translate3d(0, -2.5em, 0);
}
.hasVal::before,
.input:focus + .input_label::before {
transform: translate3d(0, -0.5em, 0);
}
.hasVal::after,
.input:focus + .input_label::after {
transform: translate3d(0, 0.5em, 0);
}
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script>
var ipt = $(".input");
$(function () {
ipt.on('blur', function () {
if (ipt.val().length == 0)
$('.input_label').removeClass("hasVal");
}).on('focus', function () {
$('.input_label').addClass("hasVal");
});
})
</script>
这样就可以完整的实现了！
完整的实现了
其他实现思路
通过通过纯css选择器实现，不过这样有个不好的地方，就是需要浏览器支持input的required，同时这个input标签必须有内容才能通过form表单提交！
<p>css解决问题！但是需要浏览器，同时input必须填写内容才能通过form提交</p>
<div class="content">
<input class="input" type="text" id="my_input2" required>
<label class="input_label" for="my_input2">
<span class="input_placeholder">提示文字2！</span>
</label>
</div>
css样式如下
.hasVal .input_placeholder,
#my_input2:valid + .input_label .input_placeholder,
.input:focus + .input_label .input_placeholder {
transform: translate3d(0, -2.5em, 0);
}
.hasVal::before,
#my_input2:valid + .input_label::before,
.input:focus + .input_label::before {
transform: translate3d(0, -0.5em, 0);
}
.hasVal::after,
#my_input2:valid + .input_label::after,
.input:focus + .input_label::after {
transform: translate3d(0, 0.5em, 0);
}
新建一个my_input2，把他设置为required，在选择其中做合法新选择，就能实现相同的效果！
您也可以下载源码来查看！
同时欢迎大家指出错误，大家一起学习！
