引用本站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 中,我无法复制相同的效果。我似乎无法理解为什么会这样
最佳答案
对 HOSHI 的输入字段的快速检查表明,有一些 JS 函数绑定(bind)到 focus
和 blur
事件,然后根据字段中是否包含文本来分配类还是不是。
具体方法:
function onInputBlur( ev ) {
if( ev.target.value.trim() === '' ) {
classie.remove( ev.target.parentNode, 'input--filled' );
}
}
关于css - 使用css设计表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38492199/