Я ищу, чтобы найти пример того, как сделать ярлык/заполнитель перехода двигаться вверх из положения заполнителя в положение этикетки и наоборот ..Как вы делаете перемычки между закладками и метками?
Пример: https://www.xero.com/us/signup/
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/
надеюсь, что это достаточно просто спросить еще
Я нашел хороший 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;
}
А когда вы добавляете текст, а затем метка перемещается вниз? Как вы держите его выше после ввода текста? – 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
нет ничего такого ввода: пустой или вход [value = ""] .... btw в chrome input [value = ""] должен работать ... но другие? – cocco