如何为Input设置浮动标签？解决HTML5+CSS无效输入标签回落问题

你的问题核心在于使用了:valid伪类——它仅在输入内容符合验证规则（比如你的pattern="[0-9]+"）时才会触发，所以当输入非数字这类无效内容时，:valid不生效，标签就会回到初始位置。要实现“只要输入框有内容（无论有效无效）就让标签上移”的需求，我们可以用CSS的:not(:placeholder-shown)伪类来替代，具体方案如下：

步骤1：给输入框添加空placeholder #

首先需要给<input>标签加上placeholder=""，因为:placeholder-shown伪类依赖placeholder属性才能正常工作：

<div class="group col-md-12 no-padder form-group require-field">
  <input 
    pattern="[0-9]+" 
    class="form-control" 
    [(ngModel)]="price" 
    name="price" 
    type="text" 
    required
    placeholder="" <!-- 添加空placeholder -->
  >
  <span class="highlight"></span>
  <span class="bar"></span>
  <label class="price">rial</label>
</div>

步骤2：修改CSS选择器 #

把原来的:valid替换成:not(:placeholder-shown)，这样只要输入框有内容（不管是否符合验证规则），标签就会保持上移状态。同时保留:focus规则，让输入框获得焦点时（即使为空）标签也会上移，这是符合用户习惯的交互设计；如果你希望空输入且焦点时标签仍在top:0，可去掉:focus相关规则：

.group label {
  color: #7B53C1;
  font-size: 14px;
  font-weight: normal;
  position: absolute;
  right: 25px;
  top: 0;
  pointer-events: none;
  transition: .2s ease all;
  -moz-transition: .2s ease all;
  -webkit-transition: .2s ease all;
}

/* 替换:valid为:not(:placeholder-shown) */
.group input:focus ~ label, 
.group input:not(:placeholder-shown) ~ label {
  top: -20px;
  font-size: 14px;
  color: #7B53C1;
}

效果说明 #

• :not(:placeholder-shown)会匹配所有有内容的输入框，无论内容是否符合验证规则，完美满足你“有效/无效内容都要让标签上移”的需求。
• 保留:focus规则是为了优化体验：用户点击空输入框时，标签会上移，明确提示输入区域；若不需要这个交互，只保留.group input:not(:placeholder-shown) ~ label这一条规则即可。

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