你如何製作佔位符和標籤轉換？

Question

我期待找到如何使標籤/佔位過渡拉昇進出的佔位符位置移動到標籤位置，反之亦然一個例子..

例子：https://www.xero.com/us/signup/

Answer 1

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/

希望這就夠了別人只問

Answer 2

我找到了一個好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; 
} 

例子： https://codepen.io/sivan/pen/alKwf