Question

我正在创建一些自定义占位符动画，并且总体来说它们工作得非常好！ ...假设仍然需要输入。

我想做的是让我的“可选”字段以相同的方式操作。我正在使用:valid伪类来确定是否应激活占位符动画，但是可选字段的问题在于它们始终是“有效的”。有什么办法可以解决这个问题？

这是我的CSS：

.form-group {
    position:relative;
}

.form-control {
    border:0;
    border-radius:0;
    padding-left:0;
    padding:15px 10px 3px 0;

    &:valid {
      &+ label {
        top:0;
        opacity:1;
      }
    }

    &+ label {
        position:absolute;
        top:4px;
        opacity:0;
        pointer-events:none;
        font-family:Arial, sans-serif;
        color:#999;
        left:0px;
        font-size:11px;
        z-index:2;
        transition:.15 ease-in-out;
    }
}

这是一个可选字段的示例

<div class="form-group">
    <input type="text"
        class="form-control"
        placeholder="Website (optional)" />
    <label>Website (optional)</label>
</div>

Answer 1

您可以尝试使用placeholder-shown pseudoclass，但这是一项实验性技术，并非在所有浏览器上都应使用（但是您可以在Chrome，Firefox和Safari上使用）。

CSS占位符动画-如何处理“可选”状态

1 个答案: