css - 使用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 函数绑定(bind)到 focus 和 blur 事件，然后根据字段中是否包含文本来分配类还是不是。

具体方法:

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