CSS Placeholder анимации - Как обрабатывать «необязательное» состояние

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

Вы можете попробовать использовать псевдокласс, показанный в качестве заполнителя , но это экспериментальная технология, которая не предназначена для всех браузеров (но с Chrome, Firefox и Safari все будет в порядке).