我希望占位符在文本框处于焦点时以及在用户键入时移至顶部。
我不确定这是否只是html / css或任何javascript。
我当前的CSS看起来像这样,而且我还没有JS代码:
input:focus::-webkit-input-placeholder { font-size: .75em; position: relative; top: -15px; transition: 0.2s ease-out; } input::-webkit-input-placeholder { transition: 0.2s ease-in; } input[type="text"]:focus, input[type="password"]:focus { height: 50px; padding-bottom: 0px; transition: 0.2s ease-in; } input[type="text"], input[type="password"] { height: 50px; transition: 0.2s ease-in; }
它几乎可以完成工作,但是占位符在我开始键入时消失了。我正在使用twitter-bootstrap,如果这样会使事情变得更容易!
谢谢。
你可以这样
HTML:
<div> <input type="text" class="inputText" /> <span class="floating-label">Your email address</span> </div>
CSS:
input:focus ~ .floating-label, input:not(:focus):valid ~ .floating-label{ top: 8px; bottom: 10px; left: 20px; font-size: 11px; opacity: 1; } .inputText { font-size: 14px; width: 200px; height: 35px; } .floating-label { position: absolute; pointer-events: none; left: 20px; top: 18px; transition: 0.2s ease all; }