Как задать стили для input при определённых условиях?

Question

[Иван Желудков]

Есть блок контактов (обратная связь). Есть стили для вводимых полей с красным border, нужно задать зелёный border тем input, в которых:
1. Либо есть какая-то информация.
2. Либо информация введена верно (например, email имеет @).
3. Либо в данный момент этот input выделен и в него будет вводится информация.

Вот три случая, не знаю решений ни для одного, а это много где используется, особенно третий вариант.
Пробовал искать в интернете, находил только самые простые css оформления для input-ов.
P.S. Даже на тостере при оформлении вопроса меняются стили у input

Answer 1

[Евгений]

Я думаю тут javascript привлечь придется.

Comments

[Иван Желудков]

Готовых решений не встречали?

[Дмитрий Гукетлев]

да их вагон вбейте в гугл javascript validation - написано сто тыщ миллионов решений для валидации форм.

Но как показывает практика, обычно приходится писать свое сто тыщ миллион первое, потому что все существующие чуть чуть не подходят.

[Дмитрий Гукетлев]

вот например первое же из поиска: habrahabr.ru/post/128321/
вообще я только на хабре видел не меньше десятка обзоров фрэймворков для валидации разной степени упоротости

[Дмитрий Гукетлев]

Ну и html инпуты можете глянуть: htmlbook.ru/html/input/type там уже есть и дата и телефон и емэйл. И валидация встроена.

Answer 2

[Иван Желудков]

Решение проблемы оказалось проще, чем я ожидал. Один из вариантов решения проблемы, это псевдокласс :focus, который позволяет применить стили к вводимому input.

Answer 3

[MSitnikov]

Только javascript. На jquery выйдет по 2 строчки на условие, это не трудно.

Answer 4

[Сергей Протько]

input type=email. атрибут required и псеводселекторы для валидных невалидных инпутов. работает правда не во всех браузерах. Что бы во всех нужно js.

Comments

[Иван Желудков]

Спасибо за полезную информацию, но мне к сожалению не это нужно было

[Сергей Протько]

ну каков вопрос таков и ответ. вам нужно было что-то что по другому оформлять невалидные инпуты, как я понял. Валидация средствами браузера это позвляет в какой-то мере.

[Иван Желудков]

@Fesor она не подходит по дизайну

[Danil Namaste]

@webvany для этого есть css

[Иван Желудков]

@htmlcssverstka по вашему я задал вопрос "как задать стили для input с помощью css", чтобы мне ответили "Это можно сделать в css"?

[Danil Namaste]

@Fesor она не подходит по дизайну

[Danil Namaste]

это ответ на это!

[Иван Желудков]

@htmlcssverstka и я про это. Это не задать в css