Главная HTML5 css3 Стилизация верного и неверного поля ввода



Стилизация верного и неверного поля ввода


Изменение стилей формы при правильном и не правильном вводе.


css

/* Верный ввод */
input:valid {
border-color: green;
color: green;
box-shadow: none;
}
/* Не верный ввод */
input:invalid {
border-color: red;
color: red;
box-shadow: none;
}
/* Верный ввод при фокусе */
input:focus:valid {
border-color: green;
color: green;
box-shadow: none;
}
/* Не верный ввод при фокусе */
input:focus:invalid {
border-color: red;
color: red;
box-shadow: none;
}
/* Верный ввод при фокусе обязательного input */
input:focus:required:valid {
border-color: green;
color: green;
box-shadow: none;
}
/* Не верный ввод при фокусе обязательного input */
input:focus:required:invalid {
border-color: red;
color: red;
box-shadow: none;
}

Пример

input:invalid {
border: 2px dashed red;
}

input:invalid:required {
background-image: linear-gradient(to right, pink, lightgreen);
}

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


Понравилась страница? Поделитесь ссылкой в социальных сетях. Поддержите проект!

Нет комментариев.



    Оставить комментарий

    Заполните все поля.

    Оценка