-1
A
回答
2
General sibling selectors & :focus
做的招用非常简单的方式;)
input{
position:absolute;
top:20px;
}
input ~ span{
transition:top .7s ease;
position:absolute;
top:20px;
}
input:focus ~ span{
top:0px;
}
<label>
<input>
<span>Text</span>
</label>
这里是一个多领域
https://jsfiddle.net/shLe3107/1/
希望这就够了别人只问
0
我找到了一个好Codepen展示了如何做到这一点在CSS的例子为例。
HTML:
<div class="row">
<input id="name" type="text" name="name">
<label for="name">Full Name</label>
</div>
CSS:
.row {
position: relative;
margin-top: 35px;
}
input {
display: block;
padding: 8px 12px;
width: 100%;
max-width: 300px;
border-radius: 5px;
border: 0;
}
label {
position: absolute;
font-weight: 600;
color: #777777;
top: 50%;
left: 12px;
transform: translateY(-50%);
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
cursor: text;
user-select: none;
transition: 0.15s ease-in-out;
}
input[data-empty="false"] + label,
input:valid + label,
input:focus + label {
top: -10px;
left: 0px;
font-size: 10px;
color: #ffffff;
}
相关问题
- 1. 占位符VS标签用于HTML5
- 2. 去掉占位符内的xml标签
- 3. 使用HTML5占位符等标签
- 4. 如何在Tensorflow中复制操作和占位符
- 5. Boost Spirit占位符类型转换
- 6. 我可以在php标签中替换占位符吗?
- 7. 删除导航控制器创建的标签栏占位符?
- 8. Spring MVC jsp标签占位符标签值
- 9. 如何将标签与占位符对齐?
- 10. 如何从UISearchBar移动占位符标签
- 11. 如何在TVML的img标签中添加占位符图片?
- 12. 如何在wordpress comments.php中获取占位符而不是标签?
- 13. 如何在占位符中使用ruby标签:或值:
- 14. PHP替换字符串标签/占位符/标记与动态值
- 15. 作为注释/标签/占位符的MySQL伪造字段
- 16. 如何调整和转换标签?
- 17. 如何在Rails 4中转换占位符文本?
- 18. 带有不同浮动标签和占位符的Android EditText
- 19. 替换和检索占位符值
- 20. pymssql和占位符
- 21. 占位符如何在Scala中工作?
- 22. CMake占位符如何工作?
- 23. 占位符如何在Flyway中工作?
- 24. double %% Python占位符如何工作
- 25. 替换标题占位符,现在不工作
- 26. 用SED替换占位符
- 27. 用jquery替换占位符
- 28. 如何在div标签中制作换行符?
- 29. 占位符/ A数标题
- 30. 如何在WordPress中为搜索输入制作占位符
,当你添加文本,然后将标签移回下来怎么办?输入文字后如何保持以上? – Jylaw38
你需要添加javascript来检查它是否为空......没有简单的解决方案。 http://stackoverflow.com/questions/3617020/matching-an-empty-input-box-using-css http://stackoverflow.com/questions/16952526/detect-if-an-input-has-text-in -it-using-css – cocco
没有这样的输入:空或输入[值=“”] .... btw在铬输入[值=“”]应该工作...但其他人? – cocco