删除必需属性后浮动标签不起作用

Question

我已经为我的输入文件做了一个浮动标签,如下所示.它的工作正常.但是当我删除那个required输入字段时,浮动标签不起作用(虽然我不需要该字段required).请提出一些解决此问题的方法.

input:focus~.floating-label,
input:not(:focus):valid~.floating-label {
  top: 6px;
  bottom: 12px;
  left: 20px;
  font-size: 11px;
  opacity: 1;
}

.floating-label {
  position: absolute;
  pointer-events: none;
  left: 20px;
  top: 18px;
  text-transform: uppercase;
  transition: 0.2s ease all;
  color: #b2b2b2;
}

<input type="text" id="floating_name" value="" required/>
<span class="floating-label">Enter</span>

Answer 1

选择器input:focus在获得焦点时选择输入，选择器input:not(:focus):valid在valid input没有焦点时选择输入。

答：当您使用required attribute且请勿在其中输入任何值时：

1）聚焦之前和聚焦失败时：未选中任何项（原始状态）

2）焦点输入无效后，用选择input:focus。

B.删除required属性时：

1）在聚焦之前，用选择input:not(:focus):valid。

2）聚焦后，用选择input:focus。

因此，输入永远被选择，并且.floating-label不会返回到原始状态。

在您的问题中，您说：“我不需要要求的文件”

因此，删除input:not(:focus):valid~.floating-label。

完整代码：

input:focus ~ .floating-label {
  top: 6px;
  bottom: 12px;
  left: 20px;
  font-size: 11px;
  opacity: 1;
}

.floating-label {
position: absolute;
pointer-events: none;
left: 20px;
top: 18px;
text-transform: uppercase;
transition: 0.2s ease all;
color: #b2b2b2;
}  

 <input type="text" id="floating_name" value="">
 <span class="floating-label">Enter</span>

Answer 2

请尝试另一种无需“required”属性即可完成的方法

使用 ':placeholder-show'

:placeholder-shown CSS 伪类表示当前显示占位符文本的任何输入或文本区域元素。

所以label浮动有2种情况

• 当占位符不可见时（即字段中有数据时）
• 当场聚焦时

和1箱标签不浮动

• 当占位符可见时（即字段中没有数据时）

fiddle：浮动标签演示

.form-group {
  position: relative;
  margin-bottom: 1.5rem;
}
input:placeholder-shown + .form-control-placeholder{
  margin-top:0%;
}

input + .form-control-placeholder ,
.form-control:focus + .form-control-placeholder{
  position: absolute;
  transition: all 200ms;
  margin-left:-25%;
  margin-top:-3%;
}

<br><br>
<div class="form-group">
  <input type="text" id="name" class="form-control" placeholder=" " >
  <label class="form-control-placeholder" for="name">Name</label>
</div>