input:out-of-range {
border-color: red;
}Описание псевдокласа :out-of-range в CSS3
Псевдокласс :out-of-range позволяет указать стиль для элемента input с типом type="number" и атрибутами min и/или max в случае поле формы в случае, когда введеное значение выходит за рамки минимального и/или максимального ограничения.
Минимальный диапозон задается атрибутом min.
Максимальный диапозон задается атрибутом max.
Поддерживается только в браузере Opera 9.6 и выше.
Примеры использования псевдокласа :out-of-range в CSS3
Для Opera 9.6 и выше.
Пример 1 для псевдокласа :out-of-range в CSS3
Значение не указано, указано минимальное значение, указано максимальное значение - стиль :out-of-range не используется.<!DOCTYPE html>
<html>
<head>
<style>
input{
border: green solid 2px;
}
input:out-of-range{
border: red solid 2px;
}
</style>
</head>
<body>
<input type="number" min="10" max="100">
</body>
</html>Пример 2 для псевдокласа :out-of-range в CSS3
Значение указано и попадает в указанный диапозон, указано минимальное значение, указано максимальное значение - стиль :out-of-range не используется.<!DOCTYPE html>
<html>
<head>
<style>
input{
border: green solid 2px;
}
input:out-of-range{
border: red solid 2px;
}
</style>
</head>
<body>
<input type="number" min="10" max="100" value="50">
</body>
</html>Пример 3 для псевдокласа :out-of-range в CSS3
Значение указано и не попадает в указанный диапозон, указано минимальное значение, указано максимальное значение - стиль :out-of-range используется.<!DOCTYPE html>
<html>
<head>
<style>
input{
border: green solid 2px;
}
input:out-of-range{
border: red solid 2px;
}
</style>
</head>
<body>
<input type="number" min="10" max="100" value="5">
</body>
</html>