一、Material Design規範中佔位符互動效果

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

實際上，我們可以藉助css:placeholder-shown偽類，純css，無任何js，實現這樣的佔位符互動效果。

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

:placeholder-shown偽類目前相容性如下：相容性連結

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

二、placeholder-shown 優點

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

三、實現原理

拿一個輸入框舉例，html結構如下：

<div class="input-fill-box">
    <input class="input-fill" placeholder="郵箱">
    <label class="input-label">郵箱</label>
</div>

首先，讓瀏覽器預設的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;
}

廣州VI設計公司https://www.houdianzi.com

四、清除按鈕

1.html部分
input上 required是必要屬性，配合CSS偽類實現我們的效果。

<code>
 <a href="JavaScript:" class="clear">close</a>
 </code>

2.CSS部分
使用的是:valid偽類。這是CSS3中新增偽類，IE10+以及其他現代瀏覽器支援，表示表單合法。由於HTML中的<input>有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；或者漸進增強使用；或者移動端開發等，都可以試試這個新技能。