資訊專欄INFORMATION COLUMN
摘要：轉(zhuǎn)自偽類實現(xiàn)占位符交互效果一規(guī)范中占位符交互效果風(fēng)格占位符交互效果官方示意見此頁面。我們可以采用絕對定位最后，對這個元素在輸入框時候，以及非顯示的時候進行重定位縮小并位移到上方四清除按鈕部分上是必要屬性，配合偽類實現(xiàn)我們的效果。
轉(zhuǎn)自： https://github.com/yougola/bl...
CSS :placeholder-shown偽類實現(xiàn)Material Design占位符交互效果 一、Material Design規(guī)范中占位符交互效果Material Design風(fēng)格占位符交互效果官方示意見此demo頁面。
現(xiàn)在這種設(shè)計在移動端很常見，相信不少人設(shè)計項目中有實現(xiàn)過這種交互，而且，大部分是利用JS實現(xiàn)的。（ps:weex 不支持這個樣式）
實際上，我們可以借助CSS :placeholder-shown偽類，純CSS，無任何JS，實現(xiàn)這樣的占位符交互效果。
:placeholder-shown表示，當(dāng)輸入框的placeholder內(nèi)容顯示的時候，輸入框干嘛干嘛。
:placeholder-shown偽類目前兼容性如下：
兼容性鏈接
兼容性還是很不錯的，在移動端我們可以放心使用。因為就算一些老手機不支持，也不過是傳統(tǒng)的placeholder占位符效果，并沒有什么損失
二、placeholder-shown 優(yōu)點純CSS實現(xiàn)，要比JS實現(xiàn)好一千倍，代碼少，性能高，樣式調(diào)整方便，上手簡單容易，可謂是前端必備技能了。
三、實現(xiàn)原理jsbin 編輯鏈接
拿一個輸入框舉例，HTML結(jié)構(gòu)如下：
首先，讓瀏覽器默認(rèn)的placeholder效果不可見，我們可以讓顏色透明即可，如下CSS：
/ 默認(rèn)placeholder顏色透明不可見 /
.input-fill:placeholder-shown::placeholder {
color: transparent;
}
.input-fill{
margin: 0;
font-size: 16px;
line-height: 1.5;
outline: none;
padding: 20px 16px 6px;
border: 1px solid transparent;
background: #f5f5fa;
border-radius:10px;
transition: border-color .25s;
}
然后，后面的.input-label這個label元素代替成為我們?nèi)庋劭吹降恼嘉环?。我們可以采用絕對定位：
.input-fill-box {
position: relative;
}
.input-label {
position: absolute;
left: 16px; top: 14px;
pointer-events: none;
color:#BEC1D9;
padding: 0 2px;
transform-origin: 0 0;
}
最后，對這個label元素在輸入框focus時候，以及非placeholder顯示的時候進行重定位（縮小并位移到上方）：
.input-fill:not(:placeholder-shown) ~ .input-label,
.input-fill:focus ~ .input-label {
transform: scale(0.75) translate(0, -14px);
}
.input-fill:focus
{
border-color: #283282;
}
四、清除按鈕
1.html 部分
input上 required是必要屬性，配合CSS偽類實現(xiàn)我們的效果。
close
2.CSS部分
使用的是:valid偽類。這是CSS3中新增偽類，IE10+以及其他現(xiàn)代瀏覽器支持，表示表單合法。由于HTML中的有HTML5表單驗證屬性required. 于是，如果文本框沒有內(nèi)容，則不合法；有內(nèi)容，則合法，就會觸發(fā)這里的:valid偽類選擇器。而這里:valid偽類控制后面的清除按鈕顯示，于是就實現(xiàn)了我們想要的效果。
啊，對了。IE11瀏覽器下不是所有的文本框都有黑色的叉叉嗎，會跟這里的自定義清除按鈕重疊，::-ms-clear { display: none; }這段代碼可以去之~~
.clear{
position:absolute;
top:10px;
right:-20px;
display: none;
transition: all .25s;
}
.input-fill::-ms-clear { display: none; }
.input-fill:valid + .clear { display: inline; }
.input-fill:not(:focus) + .clear { display: none; }
3.實現(xiàn)的優(yōu)點
此方法相比傳統(tǒng)JS實現(xiàn)的好處在于，更簡單了。JS的話還要偵聽輸入事件(input)等，比較折騰。CSS的話完全瀏覽器自身事件特性，顯然，高效簡單的多。
4.實現(xiàn)的不足
不足在于，兼容性。IE9-以下的瀏覽器只能點蠟燭了。
不過，寫寫原型啊，demo；或者漸進增強使用；或者移動端開發(fā)等，都可以試試這個新技能。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/116327.html
摘要：輸入框的屬性允許您指定沒有輸入內(nèi)容時出現(xiàn)在元素內(nèi)的文本。當(dāng)輸入框被激活并開始輸入內(nèi)容時，元素會浮動顯示在輸入框的上方。純實現(xiàn)浮動的標(biāo)簽文字注冊事件，判斷是否輸入有值，隱藏一個元素，并根據(jù)輸入框是否有內(nèi)容來決定是否顯示這個元素。 在這篇文章中，我們將使用:placeholder-shown偽類創(chuàng)建一個浮動的問題標(biāo)簽效果，使用純CSS實現(xiàn)。 showImg(https://segmentf...
摘要：輸入框的屬性允許您指定沒有輸入內(nèi)容時出現(xiàn)在元素內(nèi)的文本。當(dāng)輸入框被激活并開始輸入內(nèi)容時，元素會浮動顯示在輸入框的上方。純實現(xiàn)浮動的標(biāo)簽文字注冊事件，判斷是否輸入有值，隱藏一個元素，并根據(jù)輸入框是否有內(nèi)容來決定是否顯示這個元素。 在這篇文章中，我們將使用:placeholder-shown偽類創(chuàng)建一個浮動的問題標(biāo)簽效果，使用純CSS實現(xiàn)。 showImg(https://segmentf...
摘要：輸入框的屬性允許您指定沒有輸入內(nèi)容時出現(xiàn)在元素內(nèi)的文本。當(dāng)輸入框被激活并開始輸入內(nèi)容時，元素會浮動顯示在輸入框的上方。純實現(xiàn)浮動的標(biāo)簽文字注冊事件，判斷是否輸入有值，隱藏一個元素，并根據(jù)輸入框是否有內(nèi)容來決定是否顯示這個元素。 在這篇文章中，我們將使用:placeholder-shown偽類創(chuàng)建一個浮動的問題標(biāo)簽效果，使用純CSS實現(xiàn)。 showImg(https://segmentf...
摘要：的偽類選擇器和偽元素選擇器，讓有了更為強大的功能。劃重點，它或它的后代獲得焦點。另外，劃重點，這個偽類是仍處于實驗室的方案。最后感謝耐心讀完。CSS 的偽類選擇器和偽元素選擇器，讓 CSS 有了更為強大的功能。 偽類大家聽的多了，偽元素可能聽到的不是那么頻繁，其實 CSS 對這兩個是有區(qū)分的。 有個錯誤有必要每次講到偽類都提一下，有時你會發(fā)現(xiàn)偽類元素使用了兩個冒號 (::) 而不是一個冒...
摘要：但是往往要引入一大堆和，其實在已有的項目中，可能只是想加一個這樣的按鈕，來增強用戶體驗，這些庫就顯得有些過于龐大了，同時由于是實現(xiàn)，很多時候還要注意加載問題。 前言 大家平時應(yīng)該經(jīng)常見到這種特效，很炫酷不是嗎 showImg(https://segmentfault.com/img/remote/1460000016740061?w=318&h=190); 這是谷歌Material D...
閱讀 2997·2023-04-26 02:25
閱讀 2267·2023-04-25 18:05
閱讀 662·2021-09-30 09:57
閱讀 2955·2021-09-27 14:10
閱讀 1670·2019-08-30 15:44
閱讀 1016·2019-08-29 15:28
閱讀 2543·2019-08-29 14:10
閱讀 2272·2019-08-29 13:30
