CSS 占位符动画 - 如何处理 "optional"状态

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 上使用)。