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

选择器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;
}  

 
 Enter