如何將浮動 label 添加到輸入？

Question

我希望當用戶過來並嘗試在“輸入”中鍵入文本時，label 會上升，如果他們將該區域留空，它會返回到原始的 position。如果用戶在那里鍵入內容，它將留在那里。

我用輸入框嘗試了這段代碼，要求它工作正常，但是當我嘗試用輸入來做這個並在輸入中添加一些內容時，label 回來了，它需要留在那里。

 div{ margin-top:40px; }.btn-add input[type="text"]{ width: 90%; padding: 10px 20px 0 20px; border: none; border-bottom:1px solid #999; font-size: 140%; color: #000; }.btn-add input:focus ~.floating-label{ top: -20px; bottom: 10px; left: 10px; font-size: 20px; opacity: 1; color: rgb(100, 6, 6); }.floating-label { position: absolute; pointer-events: none; left: 20px; top:10px; transition: 0.2s ease all; color: #999999; font-size: 120%; }.form-float{ position: relative; }

 <div class="form-float btn-add"> <input type="text" class="inputText" placeholder="" > <label class="floating-label" >Button text</label> </div>

我刪除input:not(:focus):valid~.floating-label以便它可以與不需要的字段一起使用

Answer 1

由於占位符的發生，請嘗試使用此代碼。

 .form-group { position: relative; margin-bottom: 1.5rem; } input +.form-control-placeholder { position: absolute; transition: all 200ms; top: -20px; bottom: 10px; font-size: 20px; opacity: 1; color: rgb(100, 6, 6); } input:placeholder-shown +.form-control-placeholder { position: absolute; pointer-events: none; left: 20px; top:10px; transition: 0.2s ease all; color: #999999; font-size: 120%; }.form-control:focus +.form-control-placeholder { position: absolute; transition: all 200ms; top: -20px; bottom: 10px; font-size: 20px; opacity: 1; color: rgb(100, 6, 6); } input[type="text"]{ width: 90%; padding: 10px 20px 0 20px; border: none; border-bottom:1px solid #999; font-size: 140%; color: #000; } label{ position: absolute; pointer-events: none; left: 20px; top:10px; transition: 0.2s ease all; color: #999999; font-size: 120%; }

 <br> <br> <div class="form-group"> <input type="text" class="form-control" placeholder=" " > <label class="form-control-placeholder">Button text</label> </div>

Answer 2

默認情況下將 Space 添加到占位符，然后使用input:not(:placeholder-shown)屬性檢查輸入是否為空。 這里是您的代碼的工作示例

 div{ margin-top:40px; }.btn-add input[type="text"]{ width: 90%; padding: 10px 20px 0 20px; border: none; border-bottom:1px solid #999; font-size: 140%; color: #000; }.btn-add input:focus ~.floating-label{ top: -20px; bottom: 10px; left: 10px; font-size: 20px; opacity: 1; color: rgb(100, 6, 6); }.btn-add input:not(:placeholder-shown) ~.floating-label{ top: -20px; bottom: 10px; left: 10px; font-size: 20px; opacity: 1; color: rgb(100, 6, 6); }.floating-label { position: absolute; pointer-events: none; left: 20px; top:10px; transition: 0.2s ease all; color: #999999; font-size: 120%; }.form-float{ position: relative; }

 <div class="form-float btn-add"> <input type="text" class="inputText" placeholder=" " > <label class="floating-label" >Button text</label> </div>

Answer 3

由於:placeholder-shown僅適用於顯示的占位符文本（無空字符串），您可以使用可見性。

 div { margin-top:40px; }.btn-add input[type="text"] { width: 90%; padding: 10px 20px 0 20px; border: none; border-bottom:1px solid #999; font-size: 140%; color: #000; }.floating-label { position: absolute; pointer-events: none; left: 20px; top: -20px; transition: 0.2s ease all; color: #999999; font-size: 120%; }.form-float input:placeholder-shown ~ label { top: 0; visibility: hidden; }.form-float { position: relative; }

 <div class="form-float btn-add"> <input type="text" placeholder="Button Label" > <label class="floating-label">Button Label</label> </div>

Answer 4

這是兩種解決方案。 我認為他們需要一些調整，因為他們可能不正確。

解決方案 #1：在焦點上浮動 label

 .custom-form-input { display: block; width: 100%; height:32px; padding: 1rem.55rem.065rem.55rem; font-weight: 400; border: 1px solid #cad3d6; transition: border-color.15s ease-in-out, box-shadow.15s ease-in-out; background-color: #fafafa; font-size: 0.79em; color:#000000; border-radius: 2px; font-family: Arial, Helvetica, sans-serif; }.custom-form-input:focus, .custom-form-input:active { color: #212529; background-color: #fff; border-color: #585d61; outline: 0; }.custom-form-floating { position:relative; }.custom-form-floating-label { position:absolute; color: #9aa0a9; font-size: 0.85em; height:100%; width:100%; top: 0px; display:flex; align-items: center; padding: 0.55rem 0.55rem; transition: 0.2s ease all; -moz-transition: 0.2s ease all; -webkit-transition: 0.2s ease all; user-select: none; pointer-events: none }.custom-form-input:focus ~ label, .custom-form-input:valid ~ label { font-size: 0.65rem; height:55%; }.wrapper { width:150px; }

 <div class="custom-form-floating"> <input id="test" class="custom-form-input" aria-label="usuario o correo electrónico" required=true aria-required="true"/> <label for="test" class="custom-form-floating-label">Example 1</label> </div> <div class="wrapper"> <div class="custom-form-floating"> <input id="test" class="custom-form-input" aria-label="usuario o correo electrónico" required=true aria-required="true"/> <label for="test" class="custom-form-floating-label">Example 2</label> </div> </div>

解決方案#2：鍵入字母時浮動 label

 .custom-form-input { display: block; width: 100%; height: 5px; font-weight: 400; border: 1px solid #cad3d6; transition: border-color.15s ease-in-out; background-color: #fafafa; font-size: 1.2em; color: #000000; padding: 1rem.50rem 1rem.50rem; border-radius: 2px; font-family: Arial, Helvetica, sans-serif; }.custom-form-input:focus, .custom-form-input:active { color: #212529; background-color: #fff; border-color: #585d61; outline: 0; }.custom-form-floating { position: relative; }.custom-form-floating-label { position: absolute; color: #9aa0a9; font-size: 0.85em; height: 100%; width: 100%; top: 0px; display: flex; align-items: center; padding: 0.55rem 0.55rem; transition: 0.2s ease all; -moz-transition: 0.2s ease all; -webkit-transition: 0.2s ease all; user-select: none; pointer-events: none }.custom-form-input:valid { padding: 1.50rem.50rem.50rem.50rem; font-size: 0.79em; }.custom-form-input:valid~label { font-size: 0.65rem; height: 55%; }.wrapper { width:250px; }

 <div class="wrapper"> <div class="custom-form-floating"> <input id="test" class="custom-form-input" aria-label="usuario o correo electrónico" required=true aria-required="true"/> <label for="test" class="custom-form-floating-label">Correo electrónico o usuario</label> </div> </div>