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中加一個Label元素

<div class="sejta-input-container"><input placeholder="this is a placeholder"/><label>this is a placeholder</label></div>

最后給Label元素添加一個絕對定位和樣式:

.sejta-input-container{...& label{pointer-events: none;position: absolute;font-size: 12px;color: #C1C1C1;top: calc(50% - 6px);left: 0;} }

好的，現在的樣子大概是這樣的：


我尼瑪。。一頓操作0-5的既視感，就是說，我們刪掉了原來的placeholder，然后用一個label標簽占住了原來placeholder的位置。熟悉CSS變換操作(視覺欺騙)的同學可能已經知道我們要干什么了，placeholder是不能亂動的，但是label基本上屬于一個可以為所欲為的標簽。
為所欲為啊為所欲為：

.sejta-input-container{& label{...transition: .1s linear;transform-origin: 0% 0%;}& input {...&:not(:placeholder-shown)~label,&:focus~label{--transy:calc((-0.5)*var(--inputHeight));transform: scale(0.8) translate(0,var(--transy));color: cornflowerblue;}}}

解讀一下，這里用了placeholder-shown的選擇器，意思是當placehodler-shown為false的時候，選擇input的下一個兄弟元素label（~選擇器），讓它進行一系列的旋轉跳躍。
注意整理的–transy變量，是為了計算transform的位移量而設置的。
我們設置變形中心 transfrom-orgin為0 0的點，這樣可以避免變形后的label向右側移動。

到現在為止，整個dom結構是這樣的，這里用了vue的格式來書寫:

<template><div class="sejta-input-container"><input placeholder="this is a placeholder"/><label>this is a placeholder</label></div> </template> <style lang="scss">.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-shown::placeholder{color: transparent;}&:not(:placeholder-shown)~label,&:focus~label{--transy:calc((-0.5)*var(--inputHeight));transform: scale(0.8) translate(0,var(--transy));color: cornflowerblue;}}& label{transition: .1s linear;transform-origin: 0% 0%;pointer-events: none;position: absolute;font-size: 12px;color: #C1C1C1;top: calc(50% - 6px);left: 0;}} </style> <script>export default {name:"sejta-input"} </script>

第三步思考：更多的交互內容

其實一開始寫這個控件，是不想使用border的。border是一個很強大的屬性，與此同時也有很大的限制性，比如說動畫。
一位偉人說得好，想要為所欲為，首先你需要一個div。

最初為了輕量和簡單，準備使用偽元素來仿造border，結果一頓操作發現input沒有before或者after偽元素–就算部分chrome瀏覽器可以渲染出來，顯示也不太正常。所以這里直接用div操作了。當然有興趣的童鞋也可以使用svg的line來做下面的效果。

我們把原來border-bottom的代碼去掉，并且添加一個div，用來偽造border：

<div class="sejta-input-container"><input placeholder="this is a placeholder"/><label>this is a placeholder</label><div class="border-line"></div></div> .sejta-input-container{...& input{.../*border-bottom: cornflowerblue 2px solid;*/box-sizing: border-box;}& .border-line{height: 2px;width:var(--inputWidth);background: cornflowerblue;position: absolute;bottom: 0;left: 0;} }

OK,現在我們得到了一個跟之前一毛一樣的input。注意這個新添加的input屬性：

box-sizing:border-box;

它的意思是讓input計算高度的時候以邊框的位置開始計算。如果沒有這一行代碼：

Very Well~
下面我們來添加交互效果。首先讓代表著激活的這個div寬度為0,然后當輸入框激活時，寬度從0變成var(–inputWidth)

.sejta-input-container{...& .border-line{...width: 0px;transition: all .2s linear;}& input{...&:not(:placeholder-shown)~.border-line,&:focus~.border-line{/*transform: scaleX(100);*/width:var(--inputWidth);color: cornflowerblue;}} }

來看看效果：

Div是真的好用，當初用SVG的位移，定位差點沒搞死我。

好的，到現在為止，貼一下全部代碼：

<template><div class="sejta-input-container"><input placeholder="this is a placeholder"/><label>this is a placeholder</label><div class="border-line"></div></div> </template> <style lang="scss">.sejta-input-container{--inputWidth: 285px;--inputHeight: 30px;width: var(--inputWidth);height: var(--inputHeight);position: relative;& .border-line{width: 0px;height: 2px;transition: all .2s linear;background: cornflowerblue;position: absolute;bottom: 0;left: 0;}& input{box-sizing: border-box;height: 100%;width: var(--inputWidth);border: 0;outline: 0;display: flex;border-bottom: #C1C1C1 2px solid;&:placeholder-shown::placeholder{color: transparent;}&:not(:placeholder-shown)~label,&:focus~label{--transy:calc((-0.5)*var(--inputHeight));transform: scale(0.8) translate(0,var(--transy));color: cornflowerblue;}&:not(:placeholder-shown)~.border-line,&:focus~.border-line{/*transform: scaleX(100);*/width:var(--inputWidth);color: cornflowerblue;}}& label{transition: .1s linear;transform-origin: 0% 0%;pointer-events: none;position: absolute;font-size: 12px;color: #C1C1C1;top: calc(50% - 6px);left: 0;}} </style> <script>export default {name:"sejta-input"} </script>

一個湊合的input就寫好了。

How To Vue Components

敬請期待

總結

以上是生活随笔為你收集整理的Amazing Css：自定义下划线样式的Input的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。