Amazing Css：自定义下划线样式的Input

Amazing Css：自定义下划线样式的Input

这篇文章将通过CSS的方式实现一个常见的Input样式，包括一些VUE的Tips

效果

相比于传统的方框Input同款样式，下划线的input输入框占用版面更小，视觉效果比较灵活，通常可以使表单面板更加整洁。写这样一个输入框的组件只需要一些CSS和少量的JS就可以完成。

第一步思考：border

对于带下划线的东西，可能最容易想到的就是border这个属性了。border属性的确可以在一定程度上完成这个需求，只需要把传统Input的边框去掉，然后将底部的border加上颜色和宽度就可以完成。
尝试给input添加如下样式,去掉原本的边框，然后给border-bottom加一个颜色和宽度。

 <div class="sejta-input-container">
        <input placeholder="input"/>
  </div>

.sejta-input-container{
        --inputWidth: 285px;
        --inputHeight: 30px;
        width: var(--inputWidth);
        height: var(--inputHeight);
        position: relative;
        & input{
            height: 100%;
            width: var(--inputWidth);
            border: 0;
            outline: 0;
            display: flex;
            border-bottom: cornflowerblue 2px solid;
        }
    }

现在这个输入框的样式大概是这样：

第二步思考：PlaceHolder

给input元素加上原生的placeholder属性，先来看看：

好像还阔以~
好吧，尽管对大多数情况，这个PlaceHolder的样式已经够了，在这个强调用户交互感（卖弄技术流）的年代里，可能还需要一点点的修饰。
我们先用代码把原来的PlaceHolder隐藏掉，将PlaceHolder的颜色设置成透明就可以了：

.sejta-input-container{
	...
	& input{
		...
		 &:placeholder-shown::placeholder{
                color: transparent;
          }
	}
}

然后给HTML中加一个L