Как задать активному бордеру инпута другой цвет?

Question

[Игорь]

наиболее актуален вариант с CSS.

https://vk.com/doc309751762_437067938

Comments

[xmoonlight]

А не подскажите, чем GIF-анимашка снята?

[Виталий Инчин ☢]

xmoonlight: liceCap, полагаю.

[xmoonlight]

Виталий Инчин ☢: Супер! Спасибо!!!

Answer 1

[Владимир]

Псевдокласс :focus, плюс знание о том, что это не свойство border, а outline, если не знакомы с outline: htmlbook.ru/css/outline

Comments

[Игорь]

какая разница бордер или оутлайн?

[Владимир]

Ну во-первых есть ссылка в моём ответе, перейти и прочитай про разницу между ними. А во-вторых изначально в инпутах задано именно это свойство и если задать не outline a border, будет двойная рамка.

[Игорь]

Владимир: спасибо!именно последнего факта мне не хватало!

Answer 2

[sunrails]

<input name="test" />

input {
    border: 1px solid black;
}
input:focus {
    border: 1px solid blue;
}

https://jsfiddle.net/shhcxqh0/

Answer 3

[xmoonlight]

input[type="text"]:focus, input[type="password"]:focus {
     border:1px solid #cc0066;
}