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属性。

根据MDN，MS Edge将不支持此功能。

在这种情况下，您只希望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>

从输入字段中删除“必需”标签后，CSS：selectors动画将停止正常工作

1 个答案: