轉：CSS :placeholder-shown偽類實現Material Design占位符交互效果

gaara 發布于2019-08-30 15:44 / 1651人閱讀

摘要：轉自偽類實現占位符交互效果一規范中占位符交互效果風格占位符交互效果官方示意見此頁面。我們可以采用絕對定位最后，對這個元素在輸入框時候，以及非顯示的時候進行重定位縮小并位移到上方四清除按鈕部分上是必要屬性，配合偽類實現我們的效果。

轉自： https://github.com/yougola/bl...

CSS :placeholder-shown偽類實現Material Design占位符交互效果 一、Material Design規范中占位符交互效果

Material Design風格占位符交互效果官方示意見此demo頁面。
現在這種設計在移動端很常見，相信不少人設計項目中有實現過這種交互，而且，大部分是利用JS實現的。（ps:weex 不支持這個樣式）

實際上，我們可以借助CSS :placeholder-shown偽類，純CSS，無任何JS，實現這樣的占位符交互效果。

:placeholder-shown表示，當輸入框的placeholder內容顯示的時候，輸入框干嘛干嘛。

:placeholder-shown偽類目前兼容性如下：
兼容性鏈接

兼容性還是很不錯的，在移動端我們可以放心使用。因為就算一些老手機不支持，也不過是傳統的placeholder占位符效果，并沒有什么損失

二、placeholder-shown 優點

純CSS實現，要比JS實現好一千倍，代碼少，性能高，樣式調整方便，上手簡單容易，可謂是前端必備技能了。

三、實現原理

jsbin 編輯鏈接
拿一個輸入框舉例，HTML結構如下：


    
    郵箱

首先，讓瀏覽器默認的placeholder效果不可見，我們可以讓顏色透明即可，如下CSS：

/ 默認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元素代替成為我們肉眼看到的占位符。我們可以采用絕對定位：
.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偽類實現我們的效果。


 close

2.CSS部分
使用的是:valid偽類。這是CSS3中新增偽類，IE10+以及其他現代瀏覽器支持，表示表單合法。由于HTML中的有HTML5表單驗證屬性required. 于是，如果文本框沒有內容，則不合法；有內容，則合法，就會觸發這里的:valid偽類選擇器。而這里:valid偽類控制后面的清除按鈕顯示，于是就實現了我們想要的效果。
啊，對了。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.實現的優點
此方法相比傳統JS實現的好處在于，更簡單了。JS的話還要偵聽輸入事件(input)等，比較折騰。CSS的話完全瀏覽器自身事件特性，顯然，高效簡單的多。

4.實現的不足
不足在于，兼容性。IE9-以下的瀏覽器只能點蠟燭了。

不過，寫寫原型啊，demo；或者漸進增強使用；或者移動端開發等，都可以試試這個新技能。

GPU云服務器云服務器 material-design material-design-lite 占位符 asp占位符

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116327.html

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

摘要：輸入框的屬性允許您指定沒有輸入內容時出現在元素內的文本。當輸入框被激活并開始輸入內容時，元素會浮動顯示在輸入框的上方。純實現浮動的標簽文字注冊事件，判斷是否輸入有值，隱藏一個元素，并根據輸入框是否有內容來決定是否顯示這個元素。在這篇文章中，我們將使用:placeholder-shown偽類創建一個浮動的問題標簽效果，使用純CSS實現。 showImg(https://segmentf...

arashicage 2019-08-30 11:09 評論0 收藏0
CSS :placeholder-shown偽類實現輸入框浮動文字效果

摘要：輸入框的屬性允許您指定沒有輸入內容時出現在元素內的文本。當輸入框被激活并開始輸入內容時，元素會浮動顯示在輸入框的上方。純實現浮動的標簽文字注冊事件，判斷是否輸入有值，隱藏一個元素，并根據輸入框是否有內容來決定是否顯示這個元素。在這篇文章中，我們將使用:placeholder-shown偽類創建一個浮動的問題標簽效果，使用純CSS實現。 showImg(https://segmentf...

junbaor 2019-08-02 15:17 評論0 收藏0
CSS :placeholder-shown偽類實現輸入框浮動文字效果

摘要：輸入框的屬性允許您指定沒有輸入內容時出現在元素內的文本。當輸入框被激活并開始輸入內容時，元素會浮動顯示在輸入框的上方。純實現浮動的標簽文字注冊事件，判斷是否輸入有值，隱藏一個元素，并根據輸入框是否有內容來決定是否顯示這個元素。在這篇文章中，我們將使用:placeholder-shown偽類創建一個浮動的問題標簽效果，使用純CSS實現。 showImg(https://segmentf...

MingjunYang 2019-08-23 18:04 評論0 收藏0
神奇的選擇器 :focus-within

摘要：的偽類選擇器和偽元素選擇器，讓有了更為強大的功能。劃重點，它或它的后代獲得焦點。另外，劃重點，這個偽類是仍處于實驗室的方案。最后感謝耐心讀完。CSS 的偽類選擇器和偽元素選擇器，讓 CSS 有了更為強大的功能。偽類大家聽的多了，偽元素可能聽到的不是那么頻繁，其實 CSS 對這兩個是有區分的。有個錯誤有必要每次講到偽類都提一下，有時你會發現偽類元素使用了兩個冒號 (::) 而不是一個冒...

clasnake 2019-04-23 13:30 評論0 收藏0
純css實現Material Design中的水滴動畫按鈕

摘要：但是往往要引入一大堆和，其實在已有的項目中，可能只是想加一個這樣的按鈕，來增強用戶體驗，這些庫就顯得有些過于龐大了，同時由于是實現，很多時候還要注意加載問題。前言大家平時應該經常見到這種特效，很炫酷不是嗎 showImg(https://segmentfault.com/img/remote/1460000016740061?w=318&h=190); 這是谷歌Material D...

lolomaco 2019-08-29 17:01 評論0 收藏0