当需要删除属性时浮动标签不工作

Question

我已经对我的输入字段进行了浮动标签，如下所示。它的工作也很好。但是，当我删除输入的required字段时，浮动标签不起作用（尽管我不需要提交required）。请提出一些解决此问题的方法。当它获得焦点和选择input:not(:focus):valid选择输入，如果valid input不是重点

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选择输入。

A.当您使用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

的:valid选择仅适用于有限制的表单元素。当你删除required你的CSS的一部分不再适用。我删除了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>