placeholder-shown僞類實現輸入框浮動文字效果

CSS :placeholder-shown僞類實現輸入框浮動文字效果

在這篇文章中,我們將使用:placeholder-shown僞類創建一個浮動的問題標籤效果,使用純CSS實現。

在這裏插入圖片描述

1.浮動的文字標籤

當我們處理輸入框時,會想方設法提供給用戶更好的體驗。有兩個標籤屬性是我們經常會用到的:

  1. label標籤是關聯表單元素,提供說明信息最適合的元素。
  2. 輸入框的placeholder屬性允許您指定沒有輸入內容時出現在元素內的文本。它用於顯示示例文字,而不是解釋或提示。

這兩個標籤屬性可以組合起來創建“浮動文字標籤”的效果,這種效果具體指的是:

  1. 首先,用戶看到一個帶有placeholder屬性的input標籤,顯示了一些示例性質的問題。label元素默認是隱藏的。
  2. 當input輸入框被激活並開始輸入內容時,label元素會浮動顯示在輸入框的上方。
  3. 當輸入框內有文字內容時,label元素就一直保持顯示在輸入框的上方,用於標示用戶輸入的內容。

2.純CSS實現浮動的標籤文字

註冊focus事件,判斷是否輸入有值,隱藏一個元素,並根據輸入框是否有內容來決定是否顯示這個元素。這聽起來像是JavaScript的工作,對嗎?並不是的!因爲有一個CSS僞類:placeholder-shown可以實現上述的效果。MDN中是這樣解釋這個僞類的:

:placeholder-shown CSS 僞類 在 或 元素顯示 placeholder text時生效。

換句話說,如果輸入框中有任何值,我們都可以認爲:placeholder-shown僞類不會被觸發。

下面是我使用這個僞類來實現浮動標籤的思路:

  1. 構建HTML代碼,通過相鄰兄弟選擇器就可以選擇input元素所對應的label標籤,並將這兩個元素包裹在一個div中。
  2. 設置input,label以及::placeholder僞元素的樣式。
  3. 將label元素放置在起始位置,並在div中垂直居中,然後隱藏它。
  4. 通過:not, :focus和:placeholder-shown僞類的組合決定什麼時候顯示label標籤:如果placeholder text消失了,則顯示label — input:not(:placeholder-shown) + label;如果輸入框獲取到了焦點,並且沒有顯示placeholder text,則顯示label — input:focus:not(:placeholder-shown) + label

下面就按照上面的思路來完成HTML與CSS。

3.HTML & CSS

3.1 HTML代碼:

<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>

3.2 CSS代碼

專門建立的學習Q-q-u-n: 731771211,分享學習方法和需要注意的小細節,不停更新最新的教程和學習技巧
(從零基礎開始到前端項目實戰教程,學習工具,全棧開發學習路線以及規劃)
.Input {
  /**
   * 容器的相對定位很重要, 因爲label元素的浮動位置是相對於它計算的
   */
  position: relative;
}

.Input-text {
  /**
   * 設置輸入框的樣式。 字體大小和行高對於確定標籤的精確定位非常重要
   */
  display: block;
  margin: 0;
  width: 100%;
  /**
   * 這些屬性在示例中會通過自定義屬性的方式一次性設置:
   *
   * padding
   * font-size
   * line-height
   */
}

.Input-text:focus {
  /**
   * 輸入框獲取焦點時的樣式
   */
}

.Input-label {
  /**
   * label元素設置爲絕對定位,並根據父元素和輸入框計算出它的位置與移動距離
   */
  display: block;
  position: absolute;
  opacity: 0;
  /**
   * 這些屬性在示例中會通過自定義屬性的方式一次性設置:
   *
   * bottom
   * left
   * font-size
   * line-height
   * transform
   * transform-origin
   * transition
   */
}

.Input-text:placeholder-shown + .Input-label {
  /**
   * 當佔位文字可見時,會隱藏label
   */
  visibility: hidden;
  z-index: -1;
}

.Input-text:not(:placeholder-shown) + .Input-label,
.Input-text:focus:not(:placeholder-shown) + .Input-label {
  /**
   * 當佔位文字消失後,例如當輸入內容時,label元素會顯示並浮動在輸入框的上面
   */
  visibility: visible;
  z-index: 1;
  opacity: 1;
  /**
   * 這些屬性在示例中會通過自定義屬性的方式一次性設置
   *
   * transform
   * transition
   */
}

4.完整的演示效果

點擊前
在這裏插入圖片描述
點擊後
在這裏插入圖片描述

5.瀏覽器支持

在這裏插入圖片描述

6.後記

我希望你通過這篇文章學到了一些東西,你還可以想出一些使用:placeholder僞類有趣的新方法。再次感謝您的閱讀!
喜歡的小夥伴可以關注我哦在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章