CSS使用placeholder-shown偽類實現輸入框浮動文字效果

  發布時間:2019-06-12 15:21:02   作者:佚名   我要評論

這篇文章主要介紹了CSS使用placeholder-shown偽類實現輸入框浮動文字效果,需要的朋友可以參考下

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

 

浮動的文字標簽

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

label標簽是關聯表單元素,提供說明信息最適合的元素。
輸入框的placeholder屬性允許您指定沒有輸入內容時出現在<input>元素內的文本。它用于顯示示例文字,而不是解釋或提示。
這兩個標簽屬性可以組合起來創建“浮動文字標簽”的效果,這種效果具體指的是:

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

純CSS實現浮動的標簽文字

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

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

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

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

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

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

HTML & CSS

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>

CSS代碼:

.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
   */
}

完整的演示效果

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

 

效果鏈接

瀏覽器支持

到目前為止,瀏覽器支持度還不錯,除了Edge。

 

總結

以上所述是小編給大家介紹的CSS使用placeholder-shown偽類實現輸入框浮動文字效果,希望對大家有所幫助,如果大家有任何疑問歡迎給我留言,小編會及時回復大家的!

相關文章

  • 詳解CSS 偽元素及Content 屬性

    本文講講述偽元素以及功能強大的Contet屬性,文章通過實例代碼相結合的形式給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友參考下吧
    2018-09-18
  • CSS :befor :after 偽元素的巧妙用法

    本篇重點介紹CSS中的:befor、:after創建的偽元素幾種使用場景,如填充文本、作為iconfont、進度線、時間線以及幾何圖形,感興趣的朋友一起看看吧
    2018-02-07
  • 利用CSS3偽元素實現逐漸發光的方格邊框

    這篇文章主要給大家介紹了利用CSS3偽元素實現逐漸發光的方格邊框的相關資料,文中給出了詳細的示例代碼供大家參考學習,對大家具有一定的參考學習價值,需要的朋友們下面來
    2017-05-07
  • css3+偽元素實現鼠標移入時下劃線向兩邊展開的效果

    這篇文章主要介紹了利用css3+偽元素實現鼠標移入時下劃線向兩邊展開效果的相關資料,文中先進行了詳細的介紹,方便大家理解,而后給出了完整的實例代碼讓大家可以參考學習
    2017-04-25
  • 輕松搞懂CSS浮動與清除浮動圖文詳解

    本文通過圖文并茂的形式給大家介紹了CSS浮動與清除浮動的實例代碼,非常不錯,具有一定的參考借鑒價值,,需要的朋友可以參考下
    2019-04-29
  • css 如何清除浮動的示例代碼

    這篇文章主要介紹了css 如何清除浮動的示例代碼,詳細的介紹了浮動到底是什么和清理浮動的方法,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看
    2018-11-12
  • css 盒模型 文檔流 幾種清除浮動的方法實例詳解

    這篇文章主要介紹了css 盒模型 文檔流 幾種清除浮動的方法實例詳解,需要的朋友可以參考下
    2018-09-10
  • 深入理解css布局之定位與浮動

    這篇文章主要介紹了css布局之定位與浮動的相關資料,需要的朋友可以參考下
    2018-05-21
  • CSS清除浮動float的三種方法小結

    使元素脫離文檔流,按照指定方向發生移動,遇到父級邊界或者相鄰的浮動元素停了下來。本文給大家帶來了CSS清除浮動float的三種方法小結,感興趣的朋友跟隨腳本之家小編一起
    2018-03-13
  • 什么是BFC? CSS 使用偽元素清除浮動的方法

    塊級格式化上下文,是一個獨立的渲染區域,讓處于 BFC 內部的元素與外部的元素相互隔離,使內外元素的定位不會相互影響。這篇文章給大家介紹了CSS 使用偽元素清除浮動的方
    2019-07-01

最新評論

湖北11选5走势图爱彩乐