-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