Выделите первый неверный ввод формы исключительно с помощью CSS

У меня есть форма, в которой все входные данные формы required. Я хочу выделить первый ввод, который является недопустимым или, скорее, не заполненным. Я думал, что смогу использовать псевдоселектор first-of-type в сочетании с псевдоселектором invalid, но как только я заполнил первый ввод, селектор не будет нацелен следующий ввод формы, который не был заполнен. Ниже мой код...

Вот мое правило CSS для таргетинга на первый, недопустимый ввод.

input:invalid:first-of-type { border: 3px blue solid; }

Вот моя форма:

<form>
    <legend>Sign Up Info</legend>
    <fieldset>      
        <label>First Name</label><br>
        <input required type="text"><br>
        <label>Last Name</label><br>
        <input required type="text"><br>
        <label>Address</label><br>
        <input required type="text"><br>
    </fieldset>        
</form>

Я хочу сделать это исключительно с помощью CSS, потому что я действительно пытаюсь упростить свой Javascript и переместить все, что может быть обработано CSS, по праву в таблицу стилей.


forms css css-selectors
person Kevin Behan    schedule 21.01.2016    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Сначала напишите правило, выделяющее недопустимые записи:

input:invalid { border: 3px blue solid; }

Затем напишите правило, согласно которому ввод, следующий за недопустимым, не будет выделен:

input:invalid ~ input { border: 0; }

Как вы поняли, ваше правило

input:invalid:first-of-type { border: 3px blue solid; }

не будет работать, потому что подсвечивает только первый ввод, если он недействителен.

person Community    schedule 21.01.2016