大家好，今天想要跟大家分享如何使用純CSS來實(shí)現(xiàn) Google Material Design 文本輸入框的風(fēng)格。

雖然今天我們有很多框架可以幫我們實(shí)現(xiàn)這些風(fēng)格，不過通過學(xué)習(xí)在底層是如何使用純CSS實(shí)現(xiàn)的原理，可以加強(qiáng)我們將來需要根據(jù)業(yè)務(wù)需求定制化這些框架組件的能力。

Demo請(qǐng)看這里 ：點(diǎn)我看Demo 【CodePen】

最終效果圖：

僅在Chrome瀏覽器上面測(cè)試過。如果大家發(fā)現(xiàn)其他瀏覽器有問題，歡迎大家提供修改方法，一起學(xué)習(xí)進(jìn)步！

開始動(dòng)手實(shí)現(xiàn)

首先，我們先創(chuàng)建如下的HTML：

<form>
  <input type="text" required />
  <label>
    <span>Username</span>
  </label>
</form>

這是一個(gè)常規(guī)的輸入用戶名的 HTML 表單。

相信聰明的大家都注意到了，我們將 <label> 標(biāo)簽放在 <input> 標(biāo)簽的后面，是因?yàn)槲覀冎笮枰ㄟ^ <input> 標(biāo)簽的狀態(tài)來選擇 <label>。然而他們是同級(jí)兄弟關(guān)系，介于純CSS的selector只提供選擇下一個(gè)兄弟的方法，我們就將 <label> 標(biāo)簽放在后面。

效果圖：

接著讓我們對(duì) <form> 元素做一下CSS效果的定制。

form {
  width: 50%;
  height: 50vh;
  margin: auto;
  position: relative;
  font-family: Sans-serif;
}

這一段CSS沒什么特別的，就是定義長(zhǎng)度高度和字體而已。

接著讓我們給 <input> 元素上一些樣式。

form input {
  height: 2rem;
  width: 10rem;
  border: none;
  border-bottom: 0.1rem solid black;
}

這一段 CSS 主要也是設(shè)置長(zhǎng)度跟寬度，還有就是只設(shè)置下方的邊框，讓其有下劃線的感覺。

效果圖：

接下來我們要設(shè)置 <label> 標(biāo)簽，也就是將 Username 字樣移動(dòng)到文本輸入框的上方。

form label {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

這里值得注意的是，我們?cè)O(shè)定了：

pointer-events: none;

是希望將來鼠標(biāo)點(diǎn)擊到文字的時(shí)候能夠觸發(fā)文本輸入框 focus 事件，而不是觸發(fā)選擇字體的事件。

效果圖：

接下來我們要給 <input> 元素增加 padding-top，這樣做可以將 <label> Username 頂上去一點(diǎn)。

接著我們給 <input> 元素加上 outline: none， 這樣當(dāng)我們點(diǎn)擊文本輸入框的時(shí)候就不會(huì)再出現(xiàn)藍(lán)色的邊框了。

form input {
  height: 2rem;
  width: 10rem;
  padding-top: 1rem; /* 新增 */
  border: none;
  border-bottom: 0.1rem solid black;
  outline: none; /* 新增 */
}

效果圖：

接著我們要在 <input> 元素后面的偽元素 ::after 上一個(gè)底部邊框的樣式，并且要將底部邊框平移到左邊。

之所以要將底部邊框平移到左邊，是將來要通過 overflow: hidden; 將其隱藏起來，只有當(dāng)文本輸入框被選中的時(shí)候，才將這個(gè)底部邊框平移回來，作為一種加強(qiáng)視覺沖擊的手段。

form label::after {
  content: ""; /* 這個(gè)很關(guān)鍵，我們需要這個(gè)屬性底部邊框才會(huì)顯示出來 */
  height: 3rem;
  width: 10rem;
  position: absolute;
  top: 0;
  left: 0;
  border-bottom: 0.2rem solid #1cb9b6; /* 底部邊框需要較為突出，這里我們加粗跟上顏色 */
  transform: translateX(-100%); /* 向左平移 100% 確保移出 form 元素之外 */
  transition: all 0.3s ease; /* 添加動(dòng)畫來達(dá)到平滑移動(dòng)的效果 */
}

效果圖：

接著我們要讓 <label> 元素 Username 向下，剛好放在底部邊框上。

form label span {
  position: absolute;
  bottom: -3rem;
  left: 0;
  transition: all 0.3s ease; /* 動(dòng)畫，達(dá)到平滑移動(dòng)的效果 */
}

效果圖：

接著我們要給處于 focus 跟處于 valid 狀態(tài)的 <input> 元素做一個(gè)樣式。也就是當(dāng)我們選擇文本輸入框，或者當(dāng)文本輸入框里有文字的時(shí)候，它們應(yīng)該處以被高亮的樣式。

這里我們之所以可以利用 valid 狀態(tài)是因?yàn)?，?HTML 里我們給 <input> 設(shè)定了 required 屬性，所以當(dāng)有文字在文本輸入框的時(shí)候就是處于 valid 狀態(tài)，反之亦然。

<input type=“text” required />
form input:focus + label span,
form input:valid + label span {
  transform: translateY(-120%); /* 將 Username向上平移 */
  font-size: 1.2rem; /* 變大字體，突顯高亮效果 */
  color: #1cb9b6; /* 高亮顏色 */
}
form input:focus + label::after,
form input:valid + label::after {
  transform: translateX(0); /* 將左邊的高亮底部邊框平移回來 */
}

效果圖：

接著我們要將不處于高亮?xí)r，閑置在左邊的底部邊框隱藏起來，我們只需要給 <form> 元素設(shè)定 overflow: hidden; 就可以了。

form {
  width: 50%;
  height: 50vh;
  margin: auto;
  position: relative;
  font-family: Sans-serif;
  overflow: hidden; /* 新增 */
}

當(dāng)處于未被選中，或者未輸入的狀態(tài)時(shí)，左邊的高亮底部邊框就看不見了。

效果圖：

這樣，我們就完成 Google Material Design 規(guī)格的文本輸入框了。

總結(jié)

以上所述是小編給大家介紹的CSS實(shí)現(xiàn) Google Material Design 文本輸入框風(fēng)格,希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

最新評(píng)論