html - CSS :selectors animation stops working correctly after removing "required" tag from input field

Question

我有以下代码，一旦输入焦点或有效，它就会将标签移出输入字段。

.form-control-placeholder {
  font-family: "Zuric Light";
  color: black;
  position: absolute;
  top: 0;
  padding: 7px 0 0 13px;
  transition: all 200ms;
  opacity: .5;
}

.form-control:focus + .form-control-placeholder,
.form-control:valid + .form-control-placeholder {
  padding: 0;
  transform: translate3d(0, -100px, 0);
  opacity: 1;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="form-group">
    <input type="text" id="address2" class="form-control" name="address2" required>
    <label class="form-control-placeholder" for="address2">Address line 2</label>
</div>

如您所见，required 属性应用于 input 字段。但是一旦我删除它，它就会因为 :valid 选择器而停止正常工作。如果没有 required 属性，它将一直有效。

我该如何解决这个问题，是否可以仅使用 CSS 来实现？

Answer 1

:valid 仅在 input 具有 required 属性时有效。实现此目的的其他方法是使用 :placeholder-shown伪类。

此伪类选择当前显示占位符文本 的所有input 和textarea。为了工作，输入元素必须具有 placeholder 属性。

According to MDN, MS Edge won't support this.

在这种情况下，您希望 label 仅在输入集中或包含某些值时才会上升。所以你需要使用 :not(:placeholder-shown) 而不是 :placeholder-shown。否则会产生反作用。

div{
position: absolute;
width:100%;
top:50px;
}
.form-control-placeholder {
  font-family: "Zuric Light";
  color: black;
  position: absolute;
  top: 0;
  padding: 7px 0 0 13px;
  transition: all 200ms;
  opacity: .5;
}

.form-control:focus+.form-control-placeholder,
.form-control:not(:placeholder-shown)+.form-control-placeholder {
  padding: 0;
  transform: translate3d(0, -100%, 0);
  opacity: 1;
}

<div class="form-group">
  <input type="text" id="address2" class="form-control" ngModel name="address2" placeholder="...">
  <label class="form-control-placeholder" for="address2">Address line 2</label>
</div>