フォーカスが合っていないときのラベル移動

Question

テキストボックス内にラベルを表示し、ラベルを周囲に移動する方法を理解しようとしています。私がこれをどのようにしたいかの例は、https://www.discover.com/のログイン画面です。ユーザーIDまたはパスワードボックスの内側をクリックすると、フォーカスの出入りに合わせてラベルが調整されます。

https://jsfiddle.net/bobrierton/Ls1c4fdj/

<div class="input-wrapper userid-wrapper"> 
    <label for="userid-content" class="user-id-label">User ID</label> 
    <input type="text" class="form-control userid user-id-input" name="userID" id="userid-content" aria-required="true" data-toggle="popover" data-content="Please enter your User ID" maxlength="16" /> 
</div> 
<div class="input-wrapper password-wrapper"> 
    <label for="password-content" class="password-label">Password</label> 
    <input type="password" class="form-control password password-input" name="password" id="password-content" aria-required="true" data-toggle="popover" data-content="Please enter your Password" maxlength="32"/> 
</div> 

誰かが、彼らはそのようにラベルを移動することができる方法で私を支援してくださいだろうか？

Answer 1

一つのアプローチ...

1. は、ドキュメントフローの外にそれを取り、うまくinput内側に置くposition: absoluteにラベルを設定します。
2. marginを使用してinputにスペースを割り当て、ラベルを入れるスペースを確保します。
3. :focus-withinを利用してください。 inputがfocusの場合、ラベルをターゲットにすることができます。
4. labelに必要な処理を設定します。以下の例では、フォントサイズを縮小し、質問のサンプルに基づいてフォントサイズを変更しました。

fiddle

.input-wrapper { 
 
    position: relative; 
 
} 
 

 
.input-wrapper label { 
 
    position: absolute; 
 
    margin: 1em; 
 
    transition: .5s ease-in-out; 
 
    top: 0; 
 
} 
 

 
.input-wrapper input { 
 
    margin: 1em; 
 
} 
 

 
.input-wrapper:focus-within label { 
 
    font-size: .8em; 
 
    top: -1em; 
 
}

<div class="input-wrapper userid-wrapper"> 
 
    <label for="userid-content" class="user-id-label">User ID</label> 
 
    <input type="text" class="form-control userid user-id-input" name="userID" id="userid-content" aria-required="true" data-toggle="popover" data-content="Please enter your User ID" maxlength="16" /> 
 
</div> 
 
<div class="input-wrapper password-wrapper"> 
 
    <label for="password-content" class="password-label">Password</label> 
 
    <input type="password" class="form-control password password-input" name="password" id="password-content" aria-required="true" data-toggle="popover" data-content="Please enter your Password" maxlength="32" /> 
 
</div>