如何向输入添加浮动标签？

Question

我希望当用户过来并尝试在“输入”中键入文本时，标签会上升，如果他们将该区域留空，它就会回到原来的位置。如果用户在那里输入了一些东西，它将留在那儿。

我用输入框尝试了这段代码，要求它工作正常，但是当我尝试用输入来做这个并在输入中添加一些内容时，标签回来了，它需要留在那里。

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

这与 html 和 css 类似

.custom-form-input {
        display: block;
        width: 100%;
        height:38px;
        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%;
    }

<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">Hello world</label>
</div>