CSS使用placeholder-shown偽類實(shí)現(xiàn)輸入框浮動(dòng)文字效果

發(fā)布時(shí)間：2019-06-12 15:21:02 作者：佚名

我要評(píng)論

這篇文章主要介紹了CSS使用placeholder-shown偽類實(shí)現(xiàn)輸入框浮動(dòng)文字效果,需要的朋友可以參考下

在這篇文章中，我們將使用:placeholder-shown偽類創(chuàng)建一個(gè)浮動(dòng)的問(wèn)題標(biāo)簽效果，使用純CSS實(shí)現(xiàn)。

浮動(dòng)的文字標(biāo)簽

當(dāng)我們處理輸入框時(shí)，會(huì)想方設(shè)法提供給用戶更好的體驗(yàn)。有兩個(gè)標(biāo)簽屬性是我們經(jīng)常會(huì)用到的：

label標(biāo)簽是關(guān)聯(lián)表單元素，提供說(shuō)明信息最適合的元素。
輸入框的placeholder屬性允許您指定沒(méi)有輸入內(nèi)容時(shí)出現(xiàn)在<input>元素內(nèi)的文本。它用于顯示示例文字，而不是解釋或提示。
這兩個(gè)標(biāo)簽屬性可以組合起來(lái)創(chuàng)建“浮動(dòng)文字標(biāo)簽”的效果，這種效果具體指的是：

首先，用戶看到一個(gè)帶有placeholder屬性的input標(biāo)簽，顯示了一些示例性質(zhì)的問(wèn)題。label元素默認(rèn)是隱藏的。
當(dāng)input輸入框被激活并開(kāi)始輸入內(nèi)容時(shí)，label元素會(huì)浮動(dòng)顯示在輸入框的上方。
當(dāng)輸入框內(nèi)有文字內(nèi)容時(shí)，label元素就一直保持顯示在輸入框的上方，用于標(biāo)示用戶輸入的內(nèi)容。

純CSS實(shí)現(xiàn)浮動(dòng)的標(biāo)簽文字

注冊(cè)focus事件，判斷是否輸入有值，隱藏一個(gè)元素，并根據(jù)輸入框是否有內(nèi)容來(lái)決定是否顯示這個(gè)元素。這聽(tīng)起來(lái)像是JavaScript的工作，對(duì)嗎？并不是的！因?yàn)橛幸粋€(gè)CSS偽類:placeholder-shown可以實(shí)現(xiàn)上述的效果。MDN中是這樣解釋這個(gè)偽類的：

:placeholder-shown CSS 偽類在 <input> 或 <textarea> 元素顯示 placeholder text

換句話說(shuō)，如果輸入框中有任何值，我們都可以認(rèn)為:placeholder-shown偽類不會(huì)被觸發(fā)。

下面是我使用這個(gè)偽類來(lái)實(shí)現(xiàn)浮動(dòng)標(biāo)簽的思路：

構(gòu)建HTML代碼，通過(guò)相鄰兄弟選擇器就可以選擇input元素所對(duì)應(yīng)的label標(biāo)簽，并將這兩個(gè)元素包裹在一個(gè)div中。
設(shè)置input，label以及::placeholder偽元素的樣式。
將label元素放置在起始位置，并在div中垂直居中，然后隱藏它。
通過(guò):not, :focus和:placeholder-shown偽類的組合決定什么時(shí)候顯示label標(biāo)簽：如果placeholder text消失了，則顯示label — input:not(:placeholder-shown) + label；如果輸入框獲取到了焦點(diǎn)，并且沒(méi)有顯示placeholder text，則顯示label — input:focus:not(:placeholder-shown) + label

下面就按照上面的思路來(lái)完成HTML與CSS。

HTML & CSS

HTML的結(jié)構(gòu)實(shí)際上非常簡(jiǎn)單，就像這樣：

<div class="Input">
  <input type="text" id="input" class="Input-text" placeholder="Your first name, e.g. Nicholas">
  <label for="input" class="Input-label">First name</label>
</div>

CSS代碼：

.Input {
  /**
   * 容器的相對(duì)定位很重要, 因?yàn)閘abel元素的浮動(dòng)位置是相對(duì)于它計(jì)算的
   */
  position: relative;
}
.Input-text {
  /**
   * 設(shè)置輸入框的樣式。 字體大小和行高對(duì)于確定標(biāo)簽的精確定位非常重要
   */
  display: block;
  margin: 0;
  width: 100%;
  /**
   * 這些屬性在示例中會(huì)通過(guò)自定義屬性的方式一次性設(shè)置：
   *
   * padding
   * font-size
   * line-height
   */
}
.Input-text:focus {
  /**
   * 輸入框獲取焦點(diǎn)時(shí)的樣式
   */
}
.Input-label {
  /**
   * label元素設(shè)置為絕對(duì)定位，并根據(jù)父元素和輸入框計(jì)算出它的位置與移動(dòng)距離
   */
  display: block;
  position: absolute;
  opacity: 0;
  /**
   * 這些屬性在示例中會(huì)通過(guò)自定義屬性的方式一次性設(shè)置：
   *
   * bottom
   * left
   * font-size
   * line-height
   * transform
   * transform-origin
   * transition
   */
}
.Input-text:placeholder-shown + .Input-label {
  /**
   * 當(dāng)占位文字可見(jiàn)時(shí)，會(huì)隱藏label
   */
  visibility: hidden;
  z-index: -1;
}
.Input-text:not(:placeholder-shown) + .Input-label,
.Input-text:focus:not(:placeholder-shown) + .Input-label {
  /**
   * 當(dāng)占位文字消失后，例如當(dāng)輸入內(nèi)容時(shí)，label元素會(huì)顯示并浮動(dòng)在輸入框的上面
   */
  visibility: visible;
  z-index: 1;
  opacity: 1;
  /**
   * 這些屬性在示例中會(huì)通過(guò)自定義屬性的方式一次性設(shè)置
   *
   * transform
   * transition
   */
}

完整的演示效果

完整的HTML和CSS代碼你可以在下面的演示鏈接中看到：