CSS :placeholder-shown偽類實現輸入框浮動文字效果
阿新 • • 發佈:2020-11-26
在這篇文章中,我們將使用: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。
廣州VI設計公司https://www.houdianzi.com
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。