送你N个有趣的输入框！

大家好，我是半夏👴，一个刚刚开始写文的沙雕程序员.如果喜欢我的文章，可以关注➕ 点赞 👍 加我微信：frontendpicker，邀你进群，一起学习交流前端，成为更优秀的工程师～.点我探索新世界！

前言

相同的输入框，第一眼的效果可能差不多，但是只要你点他，就会发生美妙的事情。在掘金网页端，不知道有没有人注意到导航栏的搜索框，当你不动他的时候，他是小小的一个。当你开始输入的时候，他变长了！虽然只是一个简单的效果，但是用户的体验就会好很多。本文介绍几类不同的输入框的效果。

底部边框类

看一下上面的效果：当输入框获取到焦点的时候会，底部bottom出现一条蓝色的线，从中间往两端扩张。

思路：

1. 这条蓝色的框是border-bottom?不是，因为底部有一条黑色的边框，却并且蓝色的框是变化的。border-bottom无法实现。
2. 使用::after和::before可以吗？input是无法设置的，那在input外层加一个父div，并设置::after。不过此时还会遇到一个问题。当你input:focus 是无法选中父节点的。
3. 既然input无法添加，且父节点无法使用::after，那么就需要考虑新增一个元素了。

  .container {
      width: 300px;
      position: relative;
  }
  input {
      outline: none;
      width: 100%;
      border: 0;
      border-bottom: 1px solid #070707;
  }

.borderBottom {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background-color: #3399ff;
    transition: 0.4s;
}
input:focus ~ .borderBottom {
    width: 100%;
    transition: 0.4s;
    left: 0;
}
<div class="container">
    <input type="text" placeholder="底部边框input"/>
    <span class="borderBottom"></span>
</div>

这里有两点要注意，

• 为了防止input获取焦点出现其他边框 使用outline: none;来控制不显示。
• span标签的初始位置是50%，宽度是从0 到100%

这是第一类，只有底部效果，你可以设置span的初始位置，实现从左往右变长，从中间往两侧变长，等等等

背景变化类

看一下上面的效果：当输入框获取到焦点的时候会，背景颜色会往两个角变化。

如果直接来做这个效果，可能是比较复杂，但是有了上面的例子这个效果就很简单实现了。

• 背景分两块，那只需要在span上加入::after和::before.
• 背景在下面，设置z-index:-1;

.focusbg::before,
.focusbg::after {
    position: absolute;
    content: "";
    background-color: #83e8fa;
    width: 50%;
    height: 100%;
    z-index: -1;
}

.focusbg::before {
    left: 0;
    top: 0;
}

.focusbg::after {
    right: 0;
    bottom: 0;
}
input:focus ~ .focusbg:before,
input:focus ~ .focusbg:after {
    width: 0;
    height: 0;
}

动态宽度

就实现方法和难度来说，这中是最简单的，例如掘金的搜索框也就是将宽度变大。

input {
    transition: all 0.3s ease-in;
    width: 120px;
    display: block;
    text-align: center;
}
input:focus {
	width: 220px;
}

这里的效果是宽度往两边增加！！！

总结

一个input输入框，只要你有想法，你就可以玩出花来！本文只是按类别列举出来，其实更多的效果，也就是这几种变化而来。

万变不离其中，一点通，处处通！