如何在CSS中使用placeholder-shown偽類實現(xiàn)輸入框浮動文字效果？針對這個問題，這篇文章詳細介紹了相對應(yīng)的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。
成都創(chuàng)新互聯(lián)公司是工信部頒發(fā)資質(zhì)IDC服務(wù)器商，為用戶提供優(yōu)質(zhì)的西部信息中心服務(wù)
浮動的文字標(biāo)簽
當(dāng)我們處理輸入框時，會想方設(shè)法提供給用戶更好的體驗。有兩個標(biāo)簽屬性是我們經(jīng)常會用到的：
label標(biāo)簽是關(guān)聯(lián)表單元素，提供說明信息最適合的元素。
輸入框的placeholder屬性允許您指定沒有輸入內(nèi)容時出現(xiàn)在元素內(nèi)的文本。它用于顯示示例文字，而不是解釋或提示。
這兩個標(biāo)簽屬性可以組合起來創(chuàng)建“浮動文字標(biāo)簽”的效果，這種效果具體指的是：
首先，用戶看到一個帶有placeholder屬性的input標(biāo)簽，顯示了一些示例性質(zhì)的問題。label元素默認(rèn)是隱藏的。
當(dāng)input輸入框被激活并開始輸入內(nèi)容時，label元素會浮動顯示在輸入框的上方。
當(dāng)輸入框內(nèi)有文字內(nèi)容時，label元素就一直保持顯示在輸入框的上方，用于標(biāo)示用戶輸入的內(nèi)容。
純CSS實現(xiàn)浮動的標(biāo)簽文字
注冊focus事件，判斷是否輸入有值，隱藏一個元素，并根據(jù)輸入框是否有內(nèi)容來決定是否顯示這個元素。這聽起來像是JavaScript的工作，對嗎？并不是的！因為有一個CSS偽類:placeholder-shown可以實現(xiàn)上述的效果。MDN中是這樣解釋這個偽類的：
:placeholder-shown CSS 偽類 在 或
重慶分公司
重慶分公司