如何向輸入添加浮動標簽？

我希望當用戶來并嘗試在“輸入”中輸入文本時，標簽會上升，如果他們將該區域留空，它會回傳到原始位置。如果用戶在那里輸入了一些東西，它將停留在那里。

我用 required 輸入框嘗試了這段代碼，它作業正常，但是當我嘗試使用輸入執行此操作并在輸入中添加一些內容時，標簽回傳下來，它需要保持在那里。

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所以它可以使用不需要的欄位

uj5u.com熱心網友回復：

由于占位符發生，請嘗試此代碼。

.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>

uj5u.com熱心網友回復：

默認情況下將空格添加到占位符，然后使用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>

uj5u.com熱心網友回復：

由于: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>

標籤：html css

上一篇：html5隱藏和取消隱藏div元素

下一篇：如何合并資料表中的2行單元格？