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代碼你可以在下面的演示鏈接中看到:
瀏覽器支持
到目前為止,瀏覽器支持度還不錯(cuò),除了Edge。
總結(jié)
以上所述是小編給大家介紹的CSS使用placeholder-shown偽類實(shí)現(xiàn)輸入框浮動(dòng)文字效果,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)歡迎給我留言,小編會(huì)及時(shí)回復(fù)大家的!
相關(guān)文章
- 浮動(dòng)指的是一個(gè)元素脫離文檔流,懸浮在父元素之上的現(xiàn)象。這篇文章給大家介紹css浮動(dòng) float屬性的相關(guān)知識(shí),感興趣的朋友一起看看吧2020-02-24
CSS實(shí)現(xiàn)元素浮動(dòng)和清除浮動(dòng)的方法
這篇文章主要介紹了CSS實(shí)現(xiàn)元素浮動(dòng)和清除浮動(dòng)的方法,簡(jiǎn)單介紹了浮動(dòng)的基本知識(shí),通過(guò)截圖代碼的形式給大家介紹了css清除浮動(dòng)的方法,需要的朋友可以參考下2019-12-05純CSS3+SVG實(shí)現(xiàn)的機(jī)器人懸浮動(dòng)畫效果源碼
這是一款基于純CSS3+SVG實(shí)現(xiàn)的機(jī)器人懸浮動(dòng)畫效果源碼。畫面中的機(jī)器人懸浮在空中并上下漂浮,隨著上下的漂浮動(dòng)作還伴隨著機(jī)器人擺動(dòng)著手臂、眨眼等動(dòng)作,機(jī)器人下方的陰影2019-09-30html/css中float浮動(dòng)的用法實(shí)例詳解
這篇文章主要介紹了html/css中float浮動(dòng)的用法實(shí)例詳解,需要的朋友可以參考下2019-09-10Css實(shí)現(xiàn)清除浮動(dòng)的方法匯總
這篇文章主要介紹了Css實(shí)現(xiàn)清除浮動(dòng)的方法匯總,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-07-11什么是BFC? CSS 使用偽元素清除浮動(dòng)的方法
塊級(jí)格式化上下文,是一個(gè)獨(dú)立的渲染區(qū)域,讓處于 BFC 內(nèi)部的元素與外部的元素相互隔離,使內(nèi)外元素的定位不會(huì)相互影響。這篇文章給大家介紹了CSS 使用偽元素清除浮動(dòng)的方2019-07-01- 這篇文章主要介紹了CSS3 清除浮動(dòng)的方法示例的相關(guān)資料,通過(guò)本文,讓大家可以明白清除浮動(dòng)的原理和幾種方法,最后得出一種本文認(rèn)為最好用的方法,感興趣的小伙伴們可以參考2018-06-01
- 這篇文章主要介紹了CSS 清除浮動(dòng)、BFC的相關(guān)資料,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-03-23