纯CSS浮动标签输入框：无需required属性的实现方案问询

我来帮你搞定这个问题！核心思路是利用CSS的:placeholder-shown伪类判断输入框是否为空，搭配:focus处理聚焦状态，完全不用依赖required属性，不会干扰表单验证。

修改后的SCSS代码 #

.myInput { 
  position: relative; 
  input { 
    padding: 30px 10px 10px; 
    display: block; 
    width: 100%; 
    border: 1px solid black; 
    &:focus { 
      outline: none; 
    } 
    // 输入框聚焦 或者 有内容时，让标签上移
    &:focus~label, 
    &:not(:placeholder-shown)~label { 
      top: 10px; 
      color: black; 
    } 
  } 
  label { 
    color: red; 
    position: absolute; 
    pointer-events: none; 
    left: 10px; 
    top: 20px; 
    transition: 0.2s ease all; 
    -moz-transition: 0.2s ease all; 
    -webkit-transition: 0.2s ease all; 
  } 
}

修改后的HTML结构 #

<div class="myInput"> 
  <input type="text" id="target" placeholder="" /> 
  <label htmlFor="target"> label </label> 
</div>

原理说明 #

1. 空占位符的作用：给input加个空的placeholder=""，是为了让:placeholder-shown伪类能正常工作——这个伪类只有在输入框为空且占位符显示时才会触发。
2. 替换:valid为:not(:placeholder-shown)：原来的:valid依赖required才能判断输入框是否为空，现在用:not(:placeholder-shown)直接检测输入框是否有内容，不管有没有验证规则都能生效。
3. 保留:focus提升体验：用户点击输入框时，标签立刻上移，避免输入内容时标签还挡着输入区域。
4. 移除错误的选择器：删掉了原来的:placeholder-shown~label，因为它会让空输入框的标签也跑到上方，不符合我们想要的“空输入时标签在下方”的效果。

这样改完之后，既摆脱了required的限制，又能完美实现浮动标签的交互：空输入时标签在输入框内部下方，聚焦或输入内容后平滑上移到顶部。

内容的提问来源于stack exchange，提问作者ajmajmajma