焦點和不重點標籤移動

我想弄清楚如何使標籤顯示在文本框內並將標籤移動到外圍。我想要的一個例子是登錄屏幕https://www.discover.com/當您在用戶名或密碼框內單擊時，您將看到標籤隨着您的注意力進行調整。焦點和不重點標籤移動

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>

會有人請幫助我，他們如何能夠移動的標籤，這樣呢？

來源

2017-09-29 David Brierton

一種方法......

設置標籤position: absolute這需要它的公文流轉，並很好地放在它裏面input。
使用margin給input一些空間，爲標籤留出空間。
利用:focus-within。當input有focus時，標籤可以被定位。
設置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>

來源

2017-09-29 14:39:52 sol

焦點和不重點標籤移動

回答

相關問題