形式設計的CSS

Question

談到HOSHI設計這個網站上：

http://tympanus.net/Development/TextInputEffects/index.html

我試圖複製在我plnkr相同：

http://plnkr.co/edit/qvU6o8Z9HEhSJtX01Ef2?p=preview

在原來的網站，進入後文字，標籤不回到它的位置，但仍然在最上面

.input__field--hoshi { 
    margin-top: 5em; 
    padding: 0.85em 0.15em; 
    width: 100%; 
    background: transparent; 
    color: #595F6E; 
} 

但在我的plnkr中，我無法複製相同的效果。我似乎無法理解爲什麼會發生這種情況

Answer 1

對HOSHI輸入字段的快速檢查表明，有JS功能綁定到focus和blur事件，然後根據該字段是否包含文本來分配類。

的確切方法：

function onInputBlur(ev) { 
    if(ev.target.value.trim() === '') { 
     classie.remove(ev.target.parentNode, 'input--filled'); 
    } 
}