比较炫酷的Input组件实现001

输入框样式

在网上看到了这样的一个输入框，感觉不错，学习一下，这里分析一下并实现它！
从图中，我们能看到他的基本组成，一个文本提示！上下各一个线条！以及输入框！
输入框的文本提示一般使用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，在选择其中做合法新选择，就能实现相同的效果！

k6.gif

您也可以下载源码来查看！
同时欢迎大家指出错误，大家一起学习！