Как подсветить input и вывести сообщение, так, как это по умолчанию делает браузер?

Question

[gooseNjuice ()]

У меня есть страничка регистрации, в которой всякие поля нужно заполнить. Все поля лежат в тэге c в конце.
Поля, которые просто должны быть ненулевыми я пометил в htmlях как required. Но есть два поля с заполнением и повторением пароля, под них я написал такой скрипт, который добавляет в случае несовпадения паролей класс error(border: 1px solid red) и correctly(то же самое, только с зеленой рамкой) в случае совпадения.
Вопрос такой: это решение очень выделяется из общего дизайна! Как сделать, чтобы при несоответствии полей инпуты подсвечилвались так же, как например, пустые поля с required, чтоб не отличить было? И как выводить в таком же стиле сообщение, что пароли не совпадают?
Вот что ещё странно: после добавления цвета рамки, меняется вообще внешний вид инпута (mozilla, linux)
скриншот #1- как это делает браузер по умолчанию, #2 - мой результат
https://www.dropbox.com/s/3baj6ta6qfgdy3d/2.jpg?dl=0
https://www.dropbox.com/s/d9flmtnzkvvavtr/3.jpg?dl=0

Comments

[Kovalsky]

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

"И как выводить в таком же стиле сообщение, что пароли не совпадают?" - в каком стиле?

[lega]

Никита Полевой, у меня в хроме 62 ничего не подсвечивается, апи для этого вроде нет
стили не помогут т.к. во всех браузерах по разному

[gooseNjuice ()]

Никита Полевой, добавил скрин, чтобы яснее было. А где это можно посмотреть?

Answer 1

[gooseNjuice ()]

Помогло использовать box-shadow, например стандартно input, не прошедший валидацию, подсвечивается так:
box-shadow: 0 0 2px 1px red;
и проблема с изменением внешнего вида инпутов отвалилась сама при использовании этого параметра

Answer 2

[Сергей Мелодин]

Подсветка input'ов - это outline, а не border. Задай всем им одинаковый outline, а уже потом его меняй.